JavaScript setTimeout 用法與範例

本篇 ShengYu 介紹 JavaScript setTimeout 的用法與範例，setTimeout 用途就是就是設定一個定時器，預設 setTimeout 只執行一次，觸發一次以後之後並不會再觸發，setTimeout 屬於非同步函式。

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

  • JavaScript setTimeout 基本用法
  • 按鈕事件觸發 setTimeout
  • 使用 clearTimeout 取消 setTimeout

那我們開始吧！

JavaScript setTimeout 基本用法

這邊介紹 JavaScript setTimeout 基本用法，setTimeout 第一個參數為觸發時要呼叫的函式，下面範例是使用 arrow function，第二個參數為要延遲多少毫秒來觸發，下面範例中 2000 表示 2 秒，如果不傳入第二個參數的話，預設是 0，即馬上立即執行傳入的函式。

settimeout.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>setTimeout</title>
    <script type="text/javascript">
      setTimeout(() => {
        document.getElementById("hello").innerText = "Timeout !!!";
      }, 2000);
    </script>
  </head>
  <body>
    <p id="hello">This is a setTimeout example</p>
  </body>
</html>

也可以將設定按鈕文字的程式邏輯獨立成一個 ChangeBtnText 函式，再用 setTimeout 傳入 ChangeBtnText 函式，如下寫法，

1
2
3
4
5
function ChangeBtnText() {
  document.getElementById("hello").innerText = "Timeout !!!";
}

setTimeout(ChangeBtnText, 2000);

按鈕事件觸發 setTimeout

這邊介紹按鈕事件觸發 setTimeout，如下範例，當按下按鈕時執行 myFunc() 會使用 setTimeout 設定 1 秒後觸發印出 log 後並改變按鈕的顯示文字，在按鈕上顯示 "時間到!!!"，

settimeout2.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>setTimeout</title>
    <script type="text/javascript">
      function myFunc() {
        setTimeout(() => {
          console.log("delay 1 second.");
          document.getElementById("btn").innerText = "時間到!!!";
        }, 1000);
      }
    </script>
  </head>
  <body>
    <button id="btn" onclick="myFunc();">點擊開始</button>
  </body>
</html>

使用 clearTimeout 取消 setTimeout

這邊介紹要如何取消 setTimeout，setTimeout 的事件還沒被觸發時，可以使用 clearTimeout 來取消 setTimeout 的設定，clearTimeout 的參數需要傳入 setTimeout 回傳的 id 值，如下範例，按下開始按鈕會 setTimeout，如果按下開始按鈕的五秒內按下取消按鈕的話會使用 clearTimeout 取消 setTimeout，

settimeout3.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
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>setTimeout</title>
    <script type="text/javascript">
      let timeoutId = undefined;

      function start() {
        console.log("start");
        timeoutId = setTimeout(() => {
          console.log("delay 5 second.");
          document.getElementById("btn1").innerText = "時間到!!!";
        }, 5000);
      }

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

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