js中的定时器 setTimeout()和setInterval()-Toy模板网

这篇具有很好参考价值的文章主要介绍了js中的定时器 setTimeout()和setInterval()。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

JavaScript 定时器，有时也称为“计时器”，用来在经过指定的时间后执行某些任务，类似于我们生活中的闹钟。

在 JavaScript 中，我们可以利用定时器来延迟执行某些代码，或者以固定的时间间隔重复执行某些代码。例如，您可以使用定时器定时更新页面中的广告或者显示一个实时的时钟等。

JavaScript 中提供了两种方式来设置定时器，分别是 setTimeout() 和 setInterval()，它们之间的区别如下：

方法	作用
setTimeout()	在指定的时间后（单位为毫秒），执行某些代码，代码只会执行一次
setInterval()	按照指定的周期（单位为毫秒）来重复执行某些代码，定时器不会自动停止，除非调用 clearInterval() 函数来手动停止或着关闭浏览器窗口

具体介绍如下：

setTimeout()

常用语法：

// 单次定时器，只能执行一次
setTimeout(function () { },time);
 // - 参数1：function 必需。函数，过time时间之后执行的业务逻辑，可写成箭头函数()=>{}的形式
 // - 参数2：time 可选。执行或调用 function 需要等待的时间，以毫秒ms计。默认为 0
 
// 清除setTimeout单次定时器
clearTimeout(定时器名称);

注意事项：time 取默认值 0 时意味着“马上”执行，或者尽快执行。不管是哪种情况，实际的延迟时间可能会比期待的 (time 毫秒数) 值长。

实际延时比设定值更久的原因：最小延迟时间

在浏览器中，setTimeout（）/setInterval（）的每调用一次定时器的最小间隔是 4ms，这通常是由于函数嵌套导致（嵌套层级达到一定深度5层），或者是由于已经执行的 setInterval 的回调函数阻塞导致的，不同浏览器中出现这种最小延迟的情况有所不同

setInterval()

常用语法：

// 循环定时器，不停歇，每过一段时间time，执行一次。
 setInterval(function () { },time);
// 参数同setTimeout
 
// 清除setInterval循环定时器
clearInterval(定时器名称);

setTimeout() 和 setInterval（）中的调用函数我们也称为回调函数 callback 普通函数是按照代码顺序直接调用。而这个函数，需要等待时间，时间到了才去调用这个函数，因此称为回调函数。

延迟限制：定时器是可以嵌套的；这意味着，setInterval（）的回调中可以嵌入对 setInterval（）的调用以创建另一个定时器，即使第一个定时器还在运行。为了减轻这对性能产生的潜在影响，一旦定时器嵌套超过 5 层深度，浏览器将自动强制设置定时器的最小时间间隔为 4 毫秒。如果尝试将深层嵌套中调用 setInterval（）的延迟设定为小于 4 毫秒的值，其将被固定为 4 毫秒。文章来源地址https://www.toymoban.com/news/detail-632117.html

到了这里，关于js中的定时器 setTimeout()和setInterval()的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！