JavaScriptでsetIntervaを使いカウントダウンタイマーを作成する方法

確かな力が身につくJavaScript「超」入門第2版という本で、カウントダウンタイマーの実装方法を学びました。

created by Rinker

¥2,728 (2024/04/19 20:58:33時点楽天市場調べ-詳細)

しかし、本に書いてあるとおりにコードをかいてみても、いまいち理解できなかったので、自分でかんたんなサンプルコードを書くことにしてみます。

この記事では、

が学べます。

JavaScriptでカウントダウンタイマーを実装

早速カウントダウンタイマーを実装してみます。

今回は、来年まであと何秒あるのかを表示していくプログラムを作りました。

流れとしては以下の通り。

ポイントとなるのは、setInterval関数の使い方と、その際getSecondに引数を渡す方法です。

それぞれ説明していきましょう。

setInterval関数は、第1引数に渡された関数を、第2引数の時間間隔（ミリ秒で指定）で順次実施していく関数です。

以下のように使います。

setInterval(関数名, 間隔);

ただし、関数名に関してはカッコなしで渡さなくてはなりません。カッコを付けると関数を実行してしまいます。ここでは関数そのものを渡したいのです。（ややこしいですが・・・）

今回のプログラムでは、setIntervalに渡したいのはgetSecond(nextYear)で、引数があります。

カッコ無しでsetIntervalの第1引数をgetSecondとしても、getSecondに引数が渡らないのでちゃんと動きません。

引数付きの関数を渡すためには少し工夫が必要です。

今回のプログラムでは、無名関数（function(){・・・}の形で定義する関数）を用いて引数を渡すようにしました。

// 無名関数を用いて引数を渡している
setInterval(function(){getSecond(nextYear)}, 1000);

無名関数を使う以外にも、以下のような方法もあります。

// 引数付きの関数名を文字列として渡す
setInterval('getSecond(nextYear)', 1000);
// bind関数を使う
setInterval(getSecond.bind(undefined, nextYear), 1000);

私には無名関数を使う方法がしっくり来たので、無名関数を使うことにしました。

setIntervalという関数さえ知っていれば、カウントダウンタイマーを作るのは難しくありません。

setIntervalの第2引数で指定したミリ秒毎に第1引数を実行してくれるので、定期的な更新が必要なときは使い勝手がいいでしょう。

引数付きの関数を定期的に実行したい場合は少し面倒ですが、一度やり方を知ってしまえば困ることはないはず。

今回は秒数だけを表示するプログラムでしたが、色々工夫の仕方もあると思うのでサンプルコードを参考に色々やってみてください。

確かな力が身につくJavaScript「超」入門第2版には、指定時刻までの「秒」「分」「時」「日」を表示するプログラムがのっています。

created by Rinker

¥2,728 (2024/04/19 20:58:33時点楽天市場調べ-詳細)