使用场景
**在 大量setInterval使用或者大量页面轮询或者指定定时任务时,把握不了 setInterval 里面的细微时差就很容易导致 setInterval 导出跳,,根本使用 clearInterval 停止不完当前时间setInterva **
在前端做定时任务时,有二种方案可以选择 第一种是使用原生JS 提供的 setInterval 或者 setTimeout 第二种是使用第三方库 cron
本文章主要讲的使用 setInterval 来做定时任务
封装setInterval函数
const countDown =(item = 60, running, finish) =>{
let stop = setInterval(() => {
if (item <= 0)
{
clearInterval(stop);
finish instanceof Function && finish(stop, item--);
} else
{
running instanceof Function && running(stop, item--);
};
}, 1000);
}
clearInterval (MDN)
Window 和 Worker 接口提供的 setInterval() 方法重复调用一个函数或执行一个代码片段,在每次调用之间具有固定的时间间隔
var intervalID = setInterval(func, [delay, arg1, arg2, ...]);
var intervalID = setInterval(function[, delay]);
var intervalID = setInterval(code, [delay]);
参数
func 要重复调用的函数,每经过指定 delay 毫秒后执行一次。第一次调用发生在 delay 毫秒之后。
code 这个语法是可选的,你可以传递一个字符串来代替一个函数对象,你传递的字符串会被编译然后每经过 delay 毫秒执行一次。这个语法因为与 eval() 存在相同的安全风险所以不推荐使用。
delay 是每次延迟的毫秒数(一秒等于 1000 毫秒),函数的每次调用会在该延迟之后发生。如果未指定,则其默认值为 0
arg1, …, argN 可选 当定时器过期的时候,将被传递给 func 函数的附加参数。
返回值 返回值 intervalID 是一个非零数值,用来标识通过 setInterval() 创建的定时器,这个值可以用来作为 clearInterval() 的参数来清除对应的定时器。
问题场景
如。当前页面有5个地方使用 countDown 该函数,触发时间和时机都不一样,要求,在下一个使用时,停止上一个定时任务,执行当前的定时任务,当大量点击某一个定时任务时,此时要去清除 上个任务,这个就会出问题 注意 细微时差 细微时差 细微时差 延迟之后发生,是每次延迟的毫秒数(一秒等于 1000 毫秒)在触发的 延迟之后发生,是每次延迟的毫秒数(一秒等于 1000 毫秒)在触发的 延迟之后发生,是每次延迟的毫秒数(一秒等于 1000 毫秒)在触发的
解决封装后 setInterval 不受控制方案1
因为 setInterval 是1s 执行一次,所有这里必须要延迟1s (在 countDown 函数 中的回调也是1s后才会执行和返回 intervalID )
解决封装后 setInterval 不受控制方案2 (不管是大鱼虾米一起抓)
在封装函数时,每一次调用 countDown 函数时就把setInterval 他返回intervalID push 到数组里面,每一次清除都循环 push的数据 clearInterval
|