需求:
页面不可见时,例如切换浏览器页签、最小化浏览器,暂停所有定时器;页面显示时,再启动定时器。
一个解决方案如下:
const uuid = (() => {
let no = 0;
return () => no++;
})();
const originSetInterval = window.setInterval;
const originClearInterval = window.clearInterval;
const timers = [];
const startTimers = () =>
timers.forEach(t => {
t.originIntervalId = originSetInterval(
t.fn,
t.ms
);
});
const stopTimers = () =>
timers.forEach(t => {
originClearInterval(t.originIntervalId);
});
document.addEventListener(
"visibilitychange",
() =>
document.visibilityState === "visible"
? startTimers()
: stopTimers()
);
window.setInterval = (fn, ms) => {
const originIntervalId =
document.visibilityState === "visible"
? originSetInterval(fn, ms)
: undefined;
const id = uuid();
timers.push({
fn,
ms,
originIntervalId,
id
});
return id;
};
window.clearInterval = id => {
const t = timers.find(t => t.id === id);
originClearInterval(t.originIntervalId);
timers.splice(timers.indexOf(t), 1);
};
覆写 setInterval
和 clearInterval
,不用改已有代码,所有定时器就都能自动启停。
但我不推荐在项目中这么做,宁愿麻烦点,写个 setSmartInterval
,全局替换 setInterval
。原因有很多,例如:
setInterval
其中,我最看重的是:这么做导致 代码行为出人意料。当一个东西和经验认知不一样时,使用它要付出更多的思考。「Don't make me think」对于代码设计同样重要。
联系客服