JavaScript・文法の道具箱

時間で動かそう

「3秒後に表示する」「1秒ごとにカウントする」——クリックだけでなく、時間もきっかけになります。2つのタイマーを覚えよう。

「クリックされたら動く」は覚えました。じつは、きっかけは人の操作だけではありません。時間もきっかけにできます。「3秒後にメッセージを出す」「1秒ごとに数字を減らす」——2つのタイマーの使い方を覚えましょう。

〜秒後に1回だけ:setTimeout

setTimeout(function () {
  console.log("3秒たったよ!");
}, 3000);

実行すると、3秒待ってからコンソールにメッセージが出ます。時間の単位はミリ秒(1000分の1秒)です。

書き方意味
10001秒
5000.5秒
30003秒

〜秒ごとにくり返す:setInterval

setIntervalは、同じことを一定間隔でくり返します。時計の表示やスライドショーの自動めくりは、これの仕事です。

setInterval(function () {
  console.log("1秒ごとに呼ばれるよ");
}, 1000);

くり返しを止める:clearInterval

setIntervalは、放っておくと永遠にくり返します。止めるには、タイマーを変数にしまっておき、clearIntervalに渡します。

const timer = setInterval(function () {
  console.log("うごいてるよ");
}, 1000);

clearInterval(timer);   // ← これで止まる

「タイマーの整理券をtimerにしまっておき、止めたくなったら整理券を見せて止める」というイメージです。

予約の取り消し:clearTimeout

じつはsetTimeoutのほうにも、対になる止め方があります。「3秒後にやってね」と予約したあと、気が変わったらclearTimeoutで取り消せます。

const timer = setTimeout(function () {
  console.log("3秒たったよ!");
}, 3000);

clearTimeout(timer);   // ← 実行される前なら取り消せる

しくみはclearIntervalと同じ整理券方式です。setは予約する、clearは整理券で取り消す——2組セットで覚えると整理しやすくなります。

動きを見てみよう

タイマー・変数・if文の合わせ技で、カウントダウンが作れます。

1秒ごとにrestを1減らして表示し、0になったらclearIntervalでくり返しを止めています。「減らす・調べる・止める」——ぜんぶ習った道具です。

このレッスンのまとめ

  1. setTimeout(やること, ミリ秒)〜ミリ秒後に1回setInterval〜ミリ秒ごとにくり返し
  2. 単位はミリ秒。1秒=1000(ゼロ3つ)
  3. くり返しはclearInterval(タイマーの変数)で止める

やってみよう

今回学んだ「タイマー」は、しまちゃんのページには使いません。カウントダウン・時計・スライドショーのように、時間で動くページのための道具です。覚えておいて、必要になったら使いましょう。

よくある質問

時間を「秒」で指定できますか?
できません。単位はミリ秒(1000分の1秒)だけです。1秒なら1000、3秒なら3000と、秒の数字にゼロを3つ付けて書きます。
setIntervalが止まりません。どうすればいいですか?
setIntervalの結果を変数にしまっておき、その変数をclearIntervalに渡すと止まります。変数にしまい忘れると止める手段がなくなるので、くり返しタイマーは最初から変数に入れる癖をつけましょう。
ボタンを連打したらカウントダウンが速くなりました。なぜですか?
押すたびに新しいタイマーが追加で動き出し、複数のタイマーが同時に数字を減らすためです。始める前に前のタイマーをclearIntervalで止めるのが定番の対策です。