【每日一题】为什么使用 setTimeout 实现 setInterval?
前端印记
共 2090字,需浏览 5分钟
· 2021-09-02
人生苦短,总需要一点仪式感。比如学前端~
分析
setInterval 的作用是每隔一段指定时间执行一个函数,但是这个执行不是真的到了时间立即执行,它真正的作用是每隔一段时间将事件加入事件队列中,只有当目前的执行栈为空的时候,才能去事件队列中取出事件执行。
所以可能会出现这样的情况:若当前执行栈执行的时间很长,导致事件队列里边积累多个定时器加入的事件,当执行栈结束的时候,这些事件会依次执行,因此可能就不能实现“到间隔一段时间执行”的效果。
针对 setInterval 的这个缺点,我们可以使用 setTimeout 递归调用来模拟 setInterval,这样我们就能确保实现“一个事件结束了、才触发下一个定时器事件”的效果,以解决了 setInterval 的问题。
模拟实现
接下来我们使用 setTimeout 模拟实现 setInterval,思路是使用递归函数,不断地执行 setTimeout
从而达到 setInterval
的效果。
简单实现
代码实现
function mySetInterval(fn, interval) {
// 设置递归函数,模拟定时器执行。
function callback() {
fn();
setTimeout(callback, interval);
}
// 启动定时器
setTimeout(callback, interval);
}
执行测试
var i = 0;
mySetInterval(() => {
i++;
console.log(i, '测试打印')
}, 1000);
进阶版:控制是否继续执行
function mySetInterval(fn, interval) {
// 控制器,控制定时器是否继续执行
var timer = {
flag: true,
};
// 设置递归函数,模拟定时器执行。
function callback() {
if (timer.flag) { // 判断是否继续执行
fn();
setTimeout(callback, interval);
}
}
// 启动定时器
setTimeout(callback, interval);
// 返回控制器
return timer;
}
// 使用
let timer = mySetInterval(() => {
console.log(123)
}, 1000)
setTimeout(() => {
timer.flag = false
}, 4000)
让我们一起携手同走前端路!
关注公众号回复【加群】即可
评论
金融研究 | 使用Python测量关键审计事项的「信息含量」
Tips: 公众号推送后内容只能更改一次,且只能改20字符。如果内容出问题,或者想更新内容, 只能重复推送。为了更好的阅读体验,建议阅读本文博客版, 链接地址https://textdata.cn/blog/2023-01-13-information-content-of-critical-aud
大邓和他的Python
0
金融研究(更新) | 使用Python构建关键审计事项的「信息含量」
Tips: 公众号推送后内容只能更改一次,且只能改20字符。如果内容出问题,或者想更新内容, 只能重复推送。为了更好的阅读体验,建议阅读本文博客版, 链接地址https://textdata.cn/blog/2023-01-13-information-content-of-critical-aud
大邓和他的Python
0
词向量(更新) | 使用MD&A2001-2022语料训练Word2Vec模型
buTips: 公众号推送后内容只能更改一次,且只能改20字符。 如果内容出问题,或者想更新内容, 只能重复推送。 为了更好的阅读体验,建议阅读本文博客版, 链接地址https://textdata.cn/blog/2023-03-24-load-w2v-and-expand-your-concpe
大邓和他的Python
0
管理世界2024 | 使用管理层讨论与分析测量「企业人工智能指标」
Tips: 公众号推送后内容只能更改一次,且只能改20字符。如果内容出问题,或者想更新内容, 只能重复推送。为了更好的阅读体验,建议阅读本文博客版, 链接地址 https://textdata.cn/blog/2024-04-19-ai-improve-firm-productivity/
大邓和他的Python
0
BigDecimal 为什么可以保证精度不丢失?
来源:juejin.cn/post/7348709938023940136👉 欢迎加入小哈的星球 ,你将获得: 专属的项目实战 / Java 学习路线 / 一对一提问 / 学习打卡 / 赠书福利全栈前后端分离博客项目 2.0 版本完结啦, 演示链接
小哈学Java
0
SpringBoot 实现图片防盗链功能
程序员的成长之路互联网/程序员/技术/资料共享 关注阅读本文大概需要 4 分钟。来自:blog.csdn.net/weixin_46157208/article/details/138051737前言出于安全考虑,我们需要后端返回的图片只允许在某个网站内展示,不想被爬虫拿到图片地
程序员的成长之路
0
一站式解决方案:基于 Arthas 实现服务发现和权限控制
来源:juejin.cn/post/7281849496983994383👉 欢迎加入小哈的星球 ,你将获得: 专属的项目实战 / Java 学习路线 / 一对一提问 / 学习打卡 / 赠书福利全栈前后端分离博客项目 2.0 版本完结啦, 演示链接
小哈学Java
0
用 Shader 实现旗帜飘扬动画效果
我觉得对于刚入门 3D 编程的朋友来说,如果能够完成代码创建模型数据->创建材质->编写Shader动画这一系列,想必会有满满的成就感。今天就用 Cocos Creator 的 utils.MeshUtils.createMesh 接口,带大家感受一下这个流程。这个流程不仅可以用于新手学
COCOS
2