B-Teck!

お仕事からゲームまで幅広く

【JavaScript】指定時間後や定期的に処理を実行する。

  • window.setInterval(function, delay)
    setIntervalは、functionに与えられた関数・処理をdelay(ms)ごとに繰り返す処理。

  • window.setTimeout(function, delay)
    setTimeoutは、functionに与えられた関数・処理をdelay(ms)後に実行する処理。

setIntervalで定義された処理を止める場合は、setIntervalの戻り値に対してclearIntervalを、
setTimeoutで定義された処理を止める場合は、setTimeoutの戻り値に対してclearTimeoutを行う。

<!DOCTYPE html>
<html lang="en">
    <head>
       <meta charset="UTF-8">
       <title>Title</title>
       <script>
       (function(){
           // windowのロード時にidがdatetimeのエレメントに時刻を挿入
           window.addEventListener("load",function(){
               document.getElementById("datetime").innerText = new Date().toString();
           },false);
           
           // 1000ms毎にidがdatetimeのエレメントの時刻を書き換え
           var interVal = window.setInterval(function(){
                               document.getElementById("datetime").innerText = new Date().toString();
                           }, 1000);
           // 10000ms後に繰り返し処理を終了する
           window.setTimeout(function(){
                               clearInterval(interVal);
                           }, 10000);
       })();
       </script>
   </head>
    <body>
        <p id="datetime"></p>
    </body>
</html>