如何在 ES6 中使用 setInterval 和 clearInterval

如何在 ES6 中使用 setInterval 和 clearInterval

JavaScript 中定时器是一项极其重要的功能，可以在指定的时间间隔内重复执行代码或者在一定时间后执行代码。在ES6之前，我们使用“setInterval”和“clearInterval”来实现该功能。但是，在ES6中，我们可以使用更强大且使用简便的方式来实现定时器功能。

ES6使用定时器功能有两种主要的方法，分别是使用“setTimeout”和“setInterval”方法。在这里，我们将关注如何在ES6中使用“setInterval”和“clearInterval”。

如何使用setInterval函数

ES6中，我们可以使用setInterval函数来实现定时器功能。该函数是全局函数和“window”对象的一部分，可以在任何地方使用。

setInterval 有两个参数：一个函数和一个时间间隔。

函数：要执行的函数

时间间隔：函数执行的时间间隔，以毫秒为单位

下面是一个示例，其中我们将在每2秒打印一次“Hello World！”：

let intervalId = setInterval(() => { console.log('Hello World!'); }, 2000);

在这个例子中，我们传递一个箭头函数作为“setInterval”中的第一个参数。这个函数在每2秒钟执行一次。我们在第二个参数中传递的是一个数字，表示该函数执行的时间间隔。该时间间隔在这里设定为2000ms，即2秒钟。

如何使用clearInterval函数

可以在任何时候使用“clearInterval”函数来停止计时器。它接受一个参数，即setInterval函数返回的计时器ID。

在下面的示例中，我们将在2秒钟后停止计时器。

let intervalId = setInterval(() => { console.log('Hello World!'); }, 2000);

setTimeout(() => { clearInterval(intervalId); console.log('停止计时器！'); }, 2000);

在这个例子中，我们创建了计时器，就像我们在之前的例子中所做的那样。但是，我们还添加了一个“setTimeout”，该函数在2秒后执行。在“setTimeout”中的函数中，我们使用“clearInterval”函数来停止计时器。在这里，我们传递的参数是setInterval函数返回的计时器ID。

总结

使用ES6中的setInterval函数可以更加方便地实现定时器功能。这种方法不仅使您的代码更具可读性，而且使您的代码更加安全，因为您可以随时停止计时器。

使用ES6中的setInterval函数时，您只需传递一个函数和指定函数执行的时间间隔。使用ES6中的clearInterval函数时，您只需传递计时器ID即可。以上示例代表了如何在ES6中使用setInterval和clearInterval函数的方式，您可以根据自己的需求进行相应的修改。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648fa54e48841e9894dd2147