使用setTimeout实现SetInterval原理解析
更新时间：2023年10月29日 08:46:06 作者：Tqing
这篇文章主要为大家介绍了使用setTimeout实现SetInterval原理解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
为什么要使用setTimeout来实现SetInterval?
我们知道setInterval以一定频率来执行一个函数，但是这样有一个问题，加入执行的这个函数相当耗时，超过了我们给定的周期时间，setInterval还会按照约定的时间来执行下次任务吗？
答案是不会，setInterval会等到当前的任务执行完成后，再立即执行下一次的任务，看个例子
setInterval(function interval() {
for(let i = 0; i < 10000000000; i++);
console.log('done')
}, 1000)打印语句出现的时间会超过1s，那么第2s的打印操作也会随着被推迟。参考下图，setInterval每次的时间间隔是从任务开始时间开始算的，尽量与下一次任务的开始执行时间间隔和给定的时间间隔相同，一旦任务的执行时间超过了给定的时间间隔，那么下一次任务会被推迟，下次任务会在本次任务结束后来执行。
如何使用setTimeout来模拟setInterval?
借助与递归的思路，在上次任务结束后，立即安排下次任务的执行，这样保证上一个任务的结束时间到下一个任务的开始时间和给定时间是相等的
function setInterval2(fn, ms, ...args) {
let timeId = null
function tick() {
timeId = setTimeout(() => {
fn(...args)
tick()
}, ms)
}
fn(...args)
tick()
return () => clearTimeout(timeId)
}
function setInterval3(fn, ms, ...args) {
fn(...args)
let timeId = setTimeout(function tick() {
fn(...args)
timeId = setTimeout(tick, ms)
}, ms)
return () => clearTimeout(timeId) // 方便随时取消
}以上就是使用setTimeout实现SetInterval原理解析的详细内容，更多关于setTimeout来实现SetInterval的资料请关注脚本之家其它相关文章！
相关文章
javascript实现网页子页面遍历回调的方法（涉及 window.frames、递归函数、函数上下文）
这篇文章主要介绍了javascript实现网页子页面遍历回调的方法（涉及 window.frames、递归函数、函数上下文）,涉及javascript回调、遍历等实现技巧,需要的朋友可以参考下2015-07-07
这篇文章主要为大家详细介绍了Jquery+javascript实现支付网页数字键盘，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-12-12
这篇文章主要为大家详细介绍了bootstrap实现图片自动轮播，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-12-12
IE没有我们想象中笨，它知道总的循环次数还是一千万次。因此，得把这一百个十万次循环分开执行。虽然Javascript是单线程的，但也可以通过setTimeout或setInterval模拟多线程。2011-03-03
这篇文章主要介绍了微信小程序之左右布局的实现代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-12-12
这篇文章主要为大家详细介绍了JavaScript实现缓动动画，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-11-11
这篇文章主要介绍了JS实现点击按钮自动增加一个单元格的方法,实例分析了javascript操作表格单元格的技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-03-03
这篇文章主要介绍了微信内置浏览器私有接口WeixinJSBridge介绍,本文讲解了发送给好友、分享函数、隐藏工具栏、隐藏三个点按钮等功能,需要的朋友可以参考下2015-05-05
这篇文章主要介绍了JavaScript+CSS无限极分类效果完整实现方法,涉及JavaScript针对页面元素节点遍历与动态操作技巧,需要的朋友可以参考下2015-12-12
这篇文章主要为大家详细介绍了createObjectURL方法实现本地图片预览，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-09-09
最新评论