如何在 JavaScript 中每 5 秒重复调用一次函数

JavaScript 是一种允许开发人员创建动态网页和应用程序的编程语言。JavaScript 最重要的特性之一是它能够以预定义的间隔重复执行代码。在本文中，我们将讨论如何在 JavaScript 中每 5 秒重复调用一个函数。

setInterval() 方法

setInterval() 方法 是一个内置的 JavaScript 函数，它允许开发人员在预定的时间间隔内重复执行一个函数。

setInterval() 方法的语法

setInterval() 方法 的语法如下

这里，第一个参数是要重复运行的函数，第二个参数是以毫秒为单位的时间间隔。setInterval() 方法返回一个数字值，该值可用于停止函数的执行。

每 5 秒重复调用一次函数

使用 setInterval() 方法，我们需要指定一个 5000 毫秒（5 秒）的时间间隔，以便每 5 秒钟重复调用一次函数。以下是一个代码片段，演示了如何在 JavaScript 中每 5 秒重复调用一次函数

输出

Hello World!
Hello World!

Hello World!...

说明

在此代码片段中，我们定义了一个名为 myFunction() 的函数，它只需将消息 “Hello World!” 记录到控制台。之后，我们使用 setInterval() 方法每 5 秒钟调用一次 myFunction() 函数。

setInterval() 方法将继续每 5 秒调用一次 myFunction() 函数，直到它被显式停止。我们可以使用 clearInterval() 方法来停止 setInterval() 方法的执行。clearInterval() 方法以 setInterval() 方法返回的数字值作为参数。

在此代码片段中，我们将 setInterval() 方法返回的数字值存储在一个名为 intervalID 的变量中。之后，我们使用 clearInterval() 方法来停止 setInterval() 方法的执行。

使用匿名函数

在前面的示例中，我们定义了一个名为 myFunction() 的命名函数，并将其作为参数传递给 setInterval() 方法。或者，我们也可以定义一个匿名函数并将其作为参数传递给 setInterval() 方法。以下是一个代码片段，演示了如何将匿名函数与 setInterval() 方法一起使用

输出

Hello World!
Hello World!
Hello World!....

说明

在此代码片段中，我们定义了一个匿名函数并将其作为参数传递给 setInterval() 方法。匿名函数只需将消息 “Hello World!” 记录到控制台。setInterval() 方法将每 5 秒钟重复调用一次匿名函数，直到它被显式停止。

使用箭头函数

在 ES6 中，引入了一项名为箭头函数的新功能。箭头函数提供了一种简洁的方式来定义 JavaScript 中的函数。以下是一个代码片段，演示了如何将箭头函数与 setInterval() 方法一起使用

输出

Hello World!
Hello World!
Hello World!...

说明

在此代码片段中，我们使用箭头函数定义了要重复运行的函数。箭头函数只需将消息 “Hello World!” 记录到控制台。setInterval() 方法将每 5 秒钟重复调用一次箭头函数，直到它被显式停止。

向函数传递参数

在此示例中，我们将向需要重复执行的函数传递参数。我们可以通过在 setInterval() 方法中的函数调用中包含参数来将参数传递给函数。

输出

Hello John!
Hello John!
Hello John!...

说明

在此代码片段中，我们定义了一个名为 greet() 的函数，该函数接受一个 name 参数，并将一条问候消息记录到控制台。之后，我们使用 setInterval() 方法每 5 秒钟调用一次 greet() 函数，并将 name 参数作为 “John” 传递。

结论

在本文中，我们讨论了如何在 JavaScript 中每 5 秒钟重复调用一个函数。我们了解到 setInterval() 方法可用于在指定的时间间隔内重复执行一个函数。setInterval() 方法是 JavaScript 中一个强大的工具，它允许开发人员在指定的时间间隔内重复执行代码。我们还学习了如何使用 clearInterval() 方法停止 setInterval() 方法的执行。此外，我们讨论了如何使用匿名函数和箭头函数与 setInterval() 方法结合使用，以简洁优雅的方式定义函数。