JavaScript setInterval()用法及代码示例

JavaScript | setInterval() 方法

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);

输出

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

正如你所看到的，setInterval() 函数接受两个参数或参数，一个回调函数，它在每个t毫秒和t毫秒本身作为第二个参数。这里回调函数将在每 3 秒后调用一次。

我们再看一个例子，

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

输出

1
2
3
4
5
6
...

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

但是如果我们不得不在一定的时间间隔后停下来呢？有没有办法停止执行 setInterval() 函数？

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);

输出

1
2
3
Function stopped!

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

setInterval() 可能会很棘手，尤其是对于 JavaScript 面试而言，因此请确保您玩得够久以掌握它的窍门！