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

JavaScriptで カウントダウンタイマーアイキャッチプログラム
スポンサーリンク

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

確かな力が身につくJavaScript「超」入門 第2版 | 狩野 祐東 | コンピュータ・IT | Kindleストア | Amazon
Amazonで狩野 祐東の確かな力が身につくJavaScript「超」入門 第2版。アマゾンならポイント還元本が多数。一度購入いただいた電子書籍は、KindleおよびFire端末、スマートフォンやタブレットなど、様々な端末でもお楽しみいただけます。

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

この記事では、

  • setInterval関数の使い方
  • コールバック関数(setIntervalの第1引数)に引数付きの関数を使う方法

が学べます。

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

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

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

See the Pen Count Down Timer 1 by gsg0222 (@gsg0222) on CodePen.

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

  1. 今現在の時間を取得
  2. 来年元旦0:00のDateインスタンスを取得
  3. setInterval関数で1秒毎にgetSecond関数を実施
  4. getSecond関数は引数の日付と現在の時間の秒差を#timerに表示

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

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

setInterval関数の使い方

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

以下のように使います。

setInterval(関数名, 間隔);

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

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

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

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

setIntervalの第1引数に引数付きの関数を渡す

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

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

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

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

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

setIntervalさえ使えれば、カウントダウンタイマーは簡単に作れる

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

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

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

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

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

おすすめ記事

コメント

タイトルとURLをコピーしました