如何使用 JavaScript 延遲 JavaScript 函式呼叫？

在本教程中，我們將學習如何在 JavaScript 中延遲函式。每當我們想要在指定時間後呼叫函式時，我們都會在JavaScript中使用延遲函式。

為了在 JavaScript 函式中提供延遲，我們使用名為setTimeout()的全域性視窗物件。此函式允許我們在執行函式之前提供特定的延遲。

讓我們深入瞭解setTimeout()函式的一些功能、語法以及其他許多內容。setTimeout()方法主要需要兩個引數：一個是需要延遲執行的函式，另一個引數是想要延遲函式的時間。

語法

在 JavaScript 中延遲函式的語法如下：

When function declared inside the setTimeout() method:
setTimeout ( function(){function_body}, time in milliseconds);
   or
When function declared outside setTimeout() method:
function function_name();
setTimeout(function_name, time i
n milliseconds);

由於在setTimeout()方法中宣告的函式是匿名的，因此我們也可以刪除函式關鍵字並將其替換為箭頭函式，如下所示：

setTimeout(()=>{function_body}, time in milliseconds);

讓我們來看一些setTimeout()函式的示例：

示例 1：在setTimeout()方法內定義函式

在setTimeout()函式內宣告函式的步驟：

  • 宣告一個setTimeout()函式。

  • 在其中定義一個帶有函式體的箭頭函式。

  • 宣告另一個引數為 3000，這將在執行後呼叫函式時提供 3 秒的延遲。

我們可以使用以下程式碼來執行上述任務：

<!DOCTYPE html>
<html>
<body>
   <h2>Tutorials Point</h2>
   <p> Delaying a function in JavaScript </p>
   <p> Wait for 3 seconds to get response </p>
   <p id="result"></p>
   <script> 
      setTimeout(()=> {
         document.getElementById("result").innerHTML = "Hello, I am here";
      }
      ,3000);
   </script>
</body>
</html>

示例 2：在 setTimeout() 方法外部定義函式

在setTimeout()函式外部宣告函式，然後在其中呼叫的步驟：

  • 定義一個名為 message 的函式，並在其中編寫其函式體。

  • 宣告一個setTimeout()函式

  • 在其中呼叫 message 函式。

  • 宣告另一個引數為 3000，這將在執行後呼叫函式時提供 3 秒的延遲。

我們可以使用以下程式碼來執行上述任務：

<!DOCTYPE html>
<html>
<body>
   <h2>Tutorials Point</h2>
   <p> Delaying a function in JavaScript </p>
   <p> Wait for 3 seconds to get response </p>
   <p id="result"></p>
   <script>
      function message() {
         document.getElementById("result").innerHTML = "Hello, I am here";
      }
      setTimeout(message,3000);
   </script>
</body>
</html>

示例 3：在 setTimeout() 方法外部定義帶引數的函式

在setTimeout()函式外部宣告帶引數的函式，然後在其中呼叫的步驟：

  • 定義一個名為 message 的函式，帶有 2 個引數及其函式體。

  • 宣告一個setTimeout()函式。

  • 在其中呼叫 message 函式作為第一個引數。

  • 宣告另一個引數為 3000，這將在執行後呼叫函式時提供 3 秒的延遲。

  • 在兩個引數之後，我們必須宣告另外兩個引數，它們是提供給 message 函式中宣告的引數的值。

我們可以使用以下 HTML 程式碼來執行上述任務：

<!DOCTYPE html>
<html>
<body>
   <h2>Tutorials Point</h2>
   <p> Delaying a function in JavaScript </p>
   <p> Wait for 3 seconds to get response </p>
   <p id="result"></p>
   <script>
      function message(a,b) { 
         let sum=a+b;
         document.getElementById("result").innerHTML = "The sum of the two values is "+ sum;
      }
      setTimeout(message,3000,6,8);
   </script>
</body>
</html>

從上面的例子中，我們瞭解到setTimeout()如果應用延遲的函式不包含任何引數，則它將採用兩個值作為引數；否則，setTimeout() 將採用兩個以上的引數。我們可以根據需要使用此延遲方法，例如，如果我們想在幾秒鐘後顯示警報，或者我們可以設定計時器，然後我們可以使用此方法執行它。

注意− 我們還可以透過呼叫 clearTimeout() 函式並在其中提供超時 ID 來取消延遲。超時 ID 是我們從setTimeout()函式獲得的返回值。

更新於：2023年10月31日

95K+ 次瀏覽

開啟你的職業生涯

完成課程獲得認證

開始學習
廣告