JS基础之定时器

523 阅读2分钟

「这是我参与11月更文挑战的第10天,活动详情查看:2021最后一次更文挑战」。

作为前端相信大家经常会接到,每隔多少秒刷新一次页面或者请求一次接口这样的需求,然后我们随手敲出一个setInterval (() => xxx, 1000) 用两三行代码就完成需求,并收获后端同学不明觉厉的夸奖。成就感满满之余,我们来了解一下js中的定时器,setTimeoutsetInterval相关的知识。

setTimeout()

延时一段时间执行某个函数

const timeoutId = setTimeout(function|code, delay?, arg1?. arg2?...)

第一个参数是 一个函数或者字符串形式的函数主体,必填,字符串因为使用eval() 可能具有安全风险不推荐使用,第二个参数是延时时间,毫秒为单位,选填,不填代表"立即"执行函数,因为setTimeout为宏任务,所以这里的立即是只下一次事件循环。

返回值是一个id,可以用来作为clearTimeout 的入参取消该定时任务,因如此每个当前的window对象上面挂载的每个定时任务包括setInterval类型的id都是独一无二的。

setInterval()

间隔特定时间重复执行某个函数,可用clearInterval``()取消定时

const timeoutId = setInterval(function|code, delay?, arg1?. arg2?...)

与setTimeout的入参返回值类似,值得注意的是,setTimeout 跟 setInterval的id 是同一批数据,意味着 使用setTimeout的生产任务可以用clearInterval 去取消,反之亦然。

另外 setInterval 有个暗坑:重复执行某个函数的意思是每间隔一定时间把回调添加到主程序执行,虽然可以保证每次主线程上每次只有一个任务函数在执行,但是如果函数执行时间比定时间隔要长的话,容易出现漏执行函数或者没有间隔的连续执行函数的现象。所以执行时要确保函数执行的时间要远小于间隔时间。或者可以使用 setTimeout + 循环来解决这个问题,setTimeout + 循环虽然不确保每次函数执行都是一样的间隔,但是至少可以确保间隔是下一次函数执行是在上一次函数执行完毕之后。

感谢阅读,快乐搬砖。

参考

setInterval()

setTimeout()