setInterval 関数を使うことで指定した処理を一定間隔で実行することができましたが、その処理を解除する方法です。定期処理を解除するには clearInterval 関数を使用します。
下記のコードは 1 秒ごとに Hello を表示します。10 回表示したら clearInterval 関数を使って定期処理を解除します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<html> <head> <meta charset="utf-8" /> <script type="text/javascript"> window.onload = function(){ var counter = 1; var timerId = setInterval(function(){ document.getElementById('target').innerHTML += 'Hello<br />'; if(counter >= 10){ clearInterval(timerId); } counter++; }, 1000); } </script> </head> <body> <div id="target"></div> </body> </body> </html> |
7行目
setInterval 関数はタイマーIDを返します。clearInterval 関数で定期処理を解除する際にタイマーIDを使用するため、変数に保存しておきます。
8行目から10行目
Hello を表示するたびに counter に保存されている数値を1ずつカウントアップさせて、10回目の実行時に clearInterval 関数を使って定期処理を解除します。