「クリックされたら動く」は覚えました。じつは、きっかけは人の操作だけではありません。時間もきっかけにできます。「3秒後にメッセージを出す」「1秒ごとに数字を減らす」——2つのタイマーの使い方を覚えましょう。
〜秒後に1回だけ:setTimeout
setTimeout(function () {
console.log("3秒たったよ!");
}, 3000);実行すると、3秒待ってからコンソールにメッセージが出ます。時間の単位はミリ秒(1000分の1秒)です。
| 書き方 | 意味 |
|---|---|
1000 | 1秒 |
500 | 0.5秒 |
3000 | 3秒 |
〜秒ごとにくり返す: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文の合わせ技で、カウントダウンが作れます。
restを1減らして表示し、0になったらclearIntervalでくり返しを止めています。「減らす・調べる・止める」——ぜんぶ習った道具です。このレッスンのまとめ
setTimeout(やること, ミリ秒)は〜ミリ秒後に1回、setIntervalは〜ミリ秒ごとにくり返し- 単位はミリ秒。1秒=1000(ゼロ3つ)
- くり返しは
clearInterval(タイマーの変数)で止める