ES10 中的 setTimeout() 和 setInterval() 方法的使用方法和注意事项-JavaScript中文网-JavaScript教程资源分享门户

前言

在前端开发中，定时器是非常常用的一种技术手段。而在 ES10 中，setTimeout() 和 setInterval() 方法得到了进一步的优化和增强，提供了更多的功能和更加灵活的使用方式。本文将介绍 ES10 中的 setTimeout() 和 setInterval() 方法的使用方法和注意事项，以及示例代码。

setTimeout() 方法

setTimeout() 方法用于在指定的时间之后执行一段代码。它的语法如下：

setTimeout(function, milliseconds, arg1, arg2, ...)

其中，function 是要执行的代码，milliseconds 是延迟的毫秒数，arg1、arg2 等是 function 执行时传入的参数（可选）。

setTimeout() 方法返回一个定时器 ID，可以用于取消定时器。可以使用 clearTimeout() 方法来取消 setTimeout() 方法创建的定时器。

使用示例

下面是一个使用 setTimeout() 方法的示例，它会在 5 秒后弹出一个提示框：

setTimeout(function() {
  alert('Hello, world!');
}, 5000);

注意事项

setTimeout() 方法只会执行一次。如果需要重复执行，可以使用 setInterval() 方法。
setTimeout() 方法的延迟时间并不是精确的。它受到浏览器负载、电脑性能等因素的影响，可能会有一定的偏差。
如果在延迟时间内离开了当前页面，setTimeout() 方法不会再执行。

setInterval() 方法

setInterval() 方法用于重复执行一段代码。它的语法如下：

setInterval(function, milliseconds, arg1, arg2, ...)

其中，function 是要执行的代码，milliseconds 是重复执行的间隔时间，arg1、arg2 等是 function 执行时传入的参数（可选）。

setInterval() 方法返回一个定时器 ID，可以用于取消定时器。可以使用 clearInterval() 方法来取消 setInterval() 方法创建的定时器。

使用示例

下面是一个使用 setInterval() 方法的示例，它会每隔 1 秒钟输出一次当前时间：

setInterval(function() {
  console.log(new Date());
}, 1000);

注意事项

setInterval() 方法会一直重复执行，直到被取消。如果只需要执行一次，可以使用 setTimeout() 方法。
setInterval() 方法的间隔时间也不是精确的。它同样受到浏览器负载、电脑性能等因素的影响，可能会有一定的偏差。
如果在间隔时间内离开了当前页面，setInterval() 方法同样不会再执行。

总结

ES10 中的 setTimeout() 和 setInterval() 方法是前端开发中常用的定时器技术。它们提供了非常灵活的使用方式，可以用于实现各种功能。但是在使用时需要注意它们的一些限制和注意事项，以保证程序的正确性和稳定性。

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