JavaScript - setTimeout() 方法

上一頁
下一頁

JavaScript setTimeout() 方法

在 JavaScript 中，setTimeout() 是一個全域性方法，允許您僅在指定時間後執行一次函式或特定的 JavaScript 程式碼。

‘window’ 物件包含 setTimeout() 方法。您可以使用 ‘window’ 物件來執行 setTimeout() 方法。

setTimeout() 方法也可以用於在使用者互動的指定時間後操作 DOM 元素。

語法

JavaScript 中 setTimeout() 方法的語法如下：

window.setTimeout(callback, delay, param1, param2, ..., paramN);
OR
setTimeout(callback, delay, param1, param2, ..., paramN);

setTimeout() 方法至少需要 2 個引數。

引數

  • 回撥函式 (Callback) − 這是一個將在特定時間後呼叫的回撥函式。您可以將箭頭函式、函式表示式或正則表示式作為此引數的值傳遞。
  • 延遲 (delay) − 這是以毫秒為單位的延遲時間，在此時間之後將呼叫回撥函式。這裡，1 秒等於 1000 毫秒。
  • param1, param2, ..., paramN − 這些是可選引數，將作為回撥函式的引數傳遞。

返回值

它返回一個數字 ID，您可以使用它來清除超時。

示例

在下面的程式碼中，我們定義了 timeout() 函式，用於在網頁中列印訊息。

我們將 timeout() 函式作為 setTimeout() 方法的第一個引數傳遞，並將 1000 毫秒作為第二個引數傳遞。

setTimeout() 方法將在 1 秒或 1000 毫秒後呼叫 timeout() 函式。

<html>
<body>
   <div id = "output"> </div>
   <script>
      document.getElementById('output').innerHTML = "Wait for a message! <br>";
      setTimeout(timeout, 1000);
      function timeout() {
         document.getElementById('output').innerHTML += "This message is printed after 1 second!";
      }
   </script>
</body>
</html>

輸出

Wait for a message!
This message is printed after 1 second!

使用 setTimeout() 方法的箭頭函式

在下面的程式碼中，我們將箭頭函式作為 setTimeout() 方法的第一個引數傳遞。它的作用與將函式名作為引數傳遞並在外部定義函式相同。

它將在 2000 毫秒後列印訊息。

示例

<html>
<body>
   <div id = "output"> </div>
   <script>
      document.getElementById('output').innerHTML += 
         "You will see the message after 2000 milliseconds! <br>";
      setTimeout(() => {
         document.getElementById('output').innerHTML += 'Hi! How are you?';
      }, 2000);
   </script>
</body>
</html>

輸出

You will see the message after 2000 milliseconds!
Hi! How are you?

向 setTimeout() 方法傳遞多個引數

您可以向 setTimeout() 方法傳遞多個引數。第一個引數是回撥函式，第二個引數是以毫秒為單位的延遲時間，其他引數將傳遞給函式引數。

在下面的程式碼中，我們向 setTimeout() 方法傳遞了 5 個引數。在 sum() 函式中，我們接收了 seetTimeOut() 方法的最後 3 個引數作為引數並對它們求和。

示例

<html>
<body>
   <div>Wait for a sum of 3 number.!</div>
   <div id = "output"></div>
   <script>
      setTimeout(sum, 1000, 10, 20, 30);
      function sum(num1, num2, num3) {
         let result = num1 + num2 + num3;
         document.getElementById('output').innerHTML = "Sum = " + result;
      }
   </script>
</body>
</html>

輸出

Wait for a sum of 3 number.!
Sum = 60

每 N 秒執行一次程式碼

我們在下面的程式碼中使用 setTimeout() 方法建立了一個計數器。

我們為計數器定義了全域性變數 p。在 counter() 函式中，我們列印計數器的值，並使用 setTimeout() 方法在 1000 毫秒後再次呼叫 counter 函式。

示例

<html>
<body>
   <div id = "output"> </div>
   <script>
      let output = document.getElementById('output');
      output.innerHTML += "The output of the counter is given below. <br>";
      var p = 0;
      function counter() {
         output.innerHTML += "count is - " + p + ".<br>";
         setTimeout(counter, 1000);
         p++;
      }
      counter();
   </script>
</body>
</html>

輸出

The output of the counter is given below.
count is - 0.
count is - 1.
count is - 2.
count is - 3.
count is - 4.
count is - 5.
count is - 6.

JavaScript clearTimeout() 方法

有時，開發人員需要在函式或 JavaScript 程式碼執行之前取消超時。在這種情況下，您可以使用 clearTimeout() 方法。

語法

您可以按照以下語法使用 clearTimeout() 方法。

clearTimeout(id);

引數

id − 這是 setTimeout() 方法返回的 ID，用於取消超時。

示例

在下面的程式碼中，我們定義了 startTimeOut() 和 stopTimeOut() 函式，它們將在使用者按下相應的按鈕時被呼叫。

在 startTimeOut() 函式中，我們設定 3 秒的超時，並將 setTimeout() 方法返回的 ID 儲存到 ‘timeOut’ 變數中。

在 stopTimeOut() 函式中，我們使用 clearTimeout() 方法並將 ‘timeOut’ 作為引數傳遞以清除超時。

<html>
<body>
   <p>Click the Stop timeout button within 3 seconds after pressing the Start timeout button.</p>
   <button onclick = "startTimeOut()">Start Timeout</button>
   <button onclick = "stopTimeOut()">Stop Timeout</button>
   <p id = "output"> </p>
   <script>
      let output = document.getElementById('output');
      let timeout;
      function startTimeOut() {
         timeout = setTimeout(() => {
            output.innerHTML = "Timeout is done";
         }, 3000);
      }

      function stopTimeOut() {
         clearTimeout(timeout);
         output.innerHTML = "Timeout is stopped";
      }
   </script>
</body>
</html>

輸出

JavaScript clearTimeout() Method

零延遲 setTimeout

零延遲超時意味著您透過將 0 毫秒作為引數傳遞來呼叫 setTimeout() 方法。

當您將 0 毫秒作為引數傳遞時，它可能在 0 毫秒後呼叫或不呼叫寫入回撥函式中的 JavaScript 程式碼。這完全取決於佇列中待處理的任務。一旦任務佇列完成，它將執行回撥函式的程式碼。

現在，問題是，為什麼需要零延遲超時？

有時，您需要在指令碼載入到瀏覽器後儘快執行特定的 JavaScript 程式碼。在這種情況下，您可以使用 `setTimeout()` 方法，並將 0 毫秒作為第二個引數。

語法

請遵循以下語法使用零延遲超時。

setTimeout(callback, 0);

在上面的語法中，我們將回調函式作為第一個引數，0 毫秒作為第二個引數。

示例

在下面的程式碼中，我們在網頁中添加了開始訊息、零延遲超時訊息和結束訊息。

在輸出中，您可以看到它首先列印開始訊息。之後，它列印結束訊息和零延遲超時訊息。因此，它在整個指令碼載入到瀏覽器時執行零延遲超時程式碼。

<html>
<body>
   <div id = "output"> </div>
   <script>
      let output = document.getElementById('output');
      output.innerHTML += "The code execution started. <br>";
      setTimeout(function () {
         output.innerHTML += "Inside the zero delay timeout. <br>";
      }, 0);
      output.innerHTML += "The code execution ended. <br>";
   </script>
</body>
</html>

輸出

The code execution started.
The code execution ended.
Inside the zero delay timeout.

您也可以遞迴地使用 `setTimeout()` 方法，如計數器示例所示。此外，您還可以將匿名函式表示式作為第一個引數傳遞，例如箭頭函式。如果您想執行特定的 JavaScript 程式碼，可以在整個指令碼執行完畢後使用零延遲超時。

列印頁面
上一頁
下一頁
廣告