概要
WindowOrWorkerGlobalScopeのsetInterval()メソッドは一定間隔で関数を実行し、clearInterval()メソッドはこれを停止する。
書式
timer_id = setInterval(function, interval);
clearInterval(timer_id);
function
- 一定時間間隔で実行させる関数を指定する。
intervalfunctionを実行させる時間間隔をミリ秒単位で与える。
setInterval()は、戻り値として実行中のタイマーのidを整数で返す。clearInterval()の引数にこのタイマーidを指定して、実行中のタイマーを停止させる。
実行例
以下の例ではページに1つのp要素と2つのボタンを配置する。
startボタンを押すとカウントが始まり、1秒ごとに増加するカウンターの値がp要素に表示される。
stopボタンを押すとカウントアップが停止される。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>interval demo</title> <script> var counter_area; var counter = 0; var timer_id; var timer_is_running = false; function count_up() { counter_area.innerHTML = counter++; } function start() { if (!timer_is_running) { timer_id = setInterval(count_up, 1000); timer_is_running = true; } } function stop() { if (timer_is_running) { clearInterval(timer_id); timer_is_running = false; } } window.onload = () => { counter_area = document.getElementById('counter_area'); document.getElementById('btn_start').addEventListener('click', start, false); document.getElementById('btn_stop').addEventListener('click', stop, false); } </script> </head> <body> <p id="counter_area">0</p> <button id="btn_start">start</button> <button id="btn_stop">stop</button> </body> </html> |