了解JavaScript中的setinterval和settimeout

介绍 (Introduction)

I am going to introduce you to two of my favorite built-in functions in JavaScript: setInterval() and setTimeout(). These are two awesome functions to know if you want an action to occur at a specific time or if you want something to continually happen such as a timer that increments or a fetch request.

我将向您介绍JavaScript中我最喜欢的两个内置函数： setInterval()和setTimeout() 。 这是两个很棒的功能，可以知道您是要在特定时间执行某项操作还是要连续发生某些事情(例如递增计时器或获取请求)。

setTimeout() (setTimeout())

For setTimeout(), it takes multiple parameters:

对于setTimeout() ，它带有多个参数：

1. A function which to execute on. (required)
   要执行的功能。 (需要)
2. milliseconds — the program will wait the specified millisecond and then run. (optional)
   毫秒-程序将等待指定的毫秒，然后运行。 (可选的)
3. Additional parameters which are passed to the function. (optional)
   传递给函数的其他参数。 (可选的)

Ok now let get into writing the actual code for this!

好吧，现在让我们开始编写实际代码！

In the example above, we write the setTimeout function first, where we pass in the parameters: the hello function and 5000 milliseconds (5 seconds).

在上面的示例中，我们首先编写setTimeout函数，并在其中传递参数： hello函数和5000毫秒(5秒)。

Then what happens it that after five seconds, we see the hello function executes with the console.log of “it’s been five seconds.”

然后，在五秒钟后，我们看到hello函数在console.log中执行了“已经五秒钟了”。

停止执行setTimeout() (Stop Execution of setTimeout())

If you want to stop this from running in one of your functions for example, then you would use the clearTimeout().

例如，如果要阻止它在您的函数之一中运行，则可以使用clearTimeout() 。

setInterval() (setInterval())

The difference between setTimeout and setInterval is that setInterval happens continuously. Like setTimeout, setInterval also takes multiple parameters:

setTimeout和setInterval之间的区别是setInterval连续发生。 与setTimeout一样，setInterval也采用多个参数：

1. a function to execute on. (required)
   要执行的功能。 (需要)
2. milliseconds — the interval in milliseconds that the function should run. (required)
   毫秒-函数应运行的时间间隔(以毫秒为单位)。 (需要)
3. Additional parameters to pass to the function. (optional)
   附加参数传递给函数。 (可选的)

I mentioned in the introduction that you might want to have in your program a timer or incremented feature. setInterval is perfect for that!

我在引言中提到过，您可能希望在程序中有一个计时器或递增功能。 setInterval非常适合该功能！

I have included the codepen below:

我在下面包含了Codepen：

演示地址

As you can see in the JS section, I have a variable counter which is where my counter will start off, I have my setInterval function with its parameters: the timer function and 1000 milliseconds (1 second).

正如您在JS部分所看到的，我有一个可变counter ，计数器将从该计数器开始，我有setInterval函数及其参数： timer函数和1000毫秒(1秒)。

The first line with the variable timerDisplay is querying to find in my HTML the h1 tag with that class because that's where I will display the actual timer and the timer function will take the incrementing number and put it into that h1 tag.

带有timerDisplay变量的第一行正在查询以在我HTML中找到具有该类的h1标记，因为这是我将显示实际计时器的地方，并且timer函数将采用递增数字并将其放入该h1标记中。

停止执行setInterval() (Stop Execution of setInterval())

I have also added a button into my HTML with an onClick event that will stop the setInterval function. This calls the clearInterval function similar to the clearTimout function I showed earlier. I pass into the clearInterval function the variable I assigned the setInterval function to called setI in the JS section of my codepen. When you click the button, the function will stop incrementing.

我还在HTML中添加了带有onClick事件的按钮，该按钮将停止setInterval函数。 这将调用clearInterval函数，类似于我之前显示的clearTimout函数。 我将我分配给setInterval函数的变量传递给clearInterval函数，该变量在我的代码setI的JS部分中称为setI。 当您单击按钮时，该功能将停止递增。

结论 (Conclusion)

I hope that was helpful! This is how you can get started with these two functions! Check out the documentation for further assistance.

希望对您有所帮助！ 这就是您如何开始使用这两个功能的方法！ 请查阅文档以获取进一步的帮助。

setInterval

setInterval

setTimeout

setTimeout

翻译自: https://medium.com/weekly-webtips/understanding-setinterval-and-settimeout-in-javascript-af932f3e13a2