setInterval（）方法和JavaScript中的示例

JavaScript | setInterval()方法 (JavaScript | setInterval() Method)

The setInterval() in JavaScript is an asynchronous function that continuously invoked a callback after every specified delay (in milliseconds). In this article, we'll look at how to use the setInterval() method in JavaScript? We have already seen a simple use case of setInterval() where we built a simple JavaScript timer. Check it out here in case you haven't.

JavaScript中的setInterval()是一个异步函数，它在每个指定的延迟(以毫秒为单位)之后连续调用回调。 在本文中，我们将研究如何在JavaScript中使用setInterval()方法 ？ 我们已经看到了setInterval()的简单用例，其中我们构建了一个简单JavaScript计时器。 如果没有，请在这里查看。

function callback() {
    console.log('This simple callback will be invoked after every 3sec');
}
let repeat = 3000;
setInterval(callback, repeat);

Output

输出量

(2) This simple callback will be invoked after every 3sec

As you can see, the setInterval() function takes in two arguments or parameters, a callback function which it executes after every t milliseconds and t milliseconds itself as the second parameter. Here the callback function will be invoked after every 3 sec.

如您所见， setInterval()函数接受两个参数或参数，这是一个回调函数 ，它在每t毫秒后执行一次，而t毫秒作为第二个参数本身执行。 在这里，每3秒将调用一次回调函数。

Let's look at another example,

让我们看另一个例子，

var num = 0;
setInterval(function() {
    num++;
    console.log(num);
}, 1000);

Output

输出量

1
2
3
4
5
6
...

Can you see what's happening in the above code? We're logging numbers from 1 to infinity after every second. Since the setInterval() function runs indefinitely, we aren't defining a constraint as to where we have to stop.

您可以看到上面的代码中发生了什么吗？ 我们每秒记录一次从1到无穷大的数字。 由于setInterval()函数无限期运行，因此我们没有定义必须停止的位置的约束。

But what if we had to stop after a certain interval of time? Is there a way to stop the execution of the setInterval() function?

但是，如果我们必须在一定时间间隔后停止，该怎么办？ 有没有一种方法可以停止执行setInterval()函数 ？

The way setInterval() function works internally is that every time you invoke such a function it has a unique ID associated with it. After it's every invocation this unique ID is what the function returns. Therefore to stop the execution of a setInterval() function all we have to do is capture or store that ID somewhere and clear it out whenever we want. Let's see how we can do that,

setInterval()函数在内部工作的方式是，每次调用该函数时，它都会具有一个唯一的ID。 每次调用后，此唯一ID就是函数返回的内容。 因此，要停止执行setInterval()函数，我们要做的就是捕获或存储该ID，并在需要时将其清除。 让我们看看我们如何做到这一点，

var num = 0;
var ID = setInterval(function() {
    num++;
    console.log(num);
    if (num == 3) {
        console.log('Function stopped!');
        clearInterval(ID);
    }
}, 1000);

Output

输出量

1
2
3
Function stopped!

Let's understand how the above code works. We know that asynchronous functions don't wait for other code blocks to execute and our setInterval() function is an asynchronous function that will run after every one second. Before it even runs for the first time, it's unique setInterval() ID is stored in the ID variable. Then after every 1 second, we start logging numbers from 1 to on the console however when we reach the if condition, we log a simple message and use the clearInterval() method to destroy the setInterval() function by passing its ID as a parameter.

让我们了解以上代码的工作原理。 我们知道异步函数不会等待其他代码块执行，而setInterval()函数是一个异步函数，它将每隔一秒钟运行一次。 在它甚至第一次运行之前，它的唯一setInterval() ID就存储在ID变量中。 然后，每隔1秒，我们就会在控制台上开始记录从1到1的数字，但是当达到if条件时，我们会记录一条简单消息，并使用clearInterval()方法通过将其ID作为参数传递来破坏setInterval()函数 。 。

setInterval() could be tricky, especially for your JavaScript interviews so make sure you play around enough to get the hang of it!

setInterval()可能很棘手，尤其是对于JavaScript采访而言，因此请确保您玩够了以掌握它！

翻译自: https://www.includehelp.com/code-snippets/setinterval-method-with-example-in-javascript.aspx