如何使用 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+ 次浏览

开启你的职业生涯

完成课程获得认证

开始学习
广告