JavaScript setInterval 用法與範例

本篇 ShengYu 介紹 JavaScript setInterval 的用法與範例，setInterval 用途就是就是設定一個定時器，setInterval 會不斷地執行觸發事件，即不只觸發一次，setInterval 屬於非同步函式。

以下 JavaScript setInterval 的用法介紹將分為這幾部份，

  • JavaScript setInterval 基本用法
  • 使用 clearInterval 取消 setInterval

那我們開始吧！

JavaScript setInterval 基本用法

這邊介紹 JavaScript setInterval 基本用法，setInterval 第一個參數為觸發時要呼叫的函式，下面範例是使用 arrow function，第二個參數為要延遲多少毫秒來觸發，下面範例中 1000 表示每隔 1 秒觸發一次。

setinterval.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Audio</title>
    <script type="text/javascript">
      setInterval(( () => console.log("Hello World") ), 1000);
    </script>
  </head>
  <body>
    <p>按下以下按鈕後會撥放音樂。</p>
    <button onclick="playAudio();">播放</button>
  </body>
</html>

使用 clearInterval 取消 setInterval

這邊介紹要如何取消 setInterval，使用 clearInterval 可以取消 setInterval 的設定，clearInterval 的參數需要傳入 setInterval 回傳的 id 值，如下範例，按下開始按鈕會 setInterval，之後每一秒都會更新秒數在按鈕上，如果按下取消按鈕的話會使用 clearInterval 取消 setInterval，

setinterval3.html
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
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>setInterval</title>
    <script type="text/javascript">
      let intervalId = undefined;
      let counter = 0;

      function start() {
        console.log("start");
        intervalId = setInterval(() => {
          counter++;
          document.getElementById("btn1").innerText = counter + " second";
        }, 1000);
      }

      function cancel() {
        console.log("cancel");
        clearInterval(intervalId);
      }
    </script>
  </head>
  <body>
    <button id="btn1" onclick="start();">開始</button>
    <button id="btn2" onclick="cancel();">取消</button>
  </body>
</html>

以上就是 JavaScript setInterval 的用法與範例介紹，
如果你覺得我的文章寫得不錯、對你有幫助的話記得 Facebook 按讚支持一下！