十五周刊 - 92
2022 第 26 周周报
欢迎来到十五周刊，我们每周都会分享有价值的前端技术文章，让你随时掌握前端的最新动态。此外，我们还会介绍一些实用的软件工具，帮助你提升工作效率。同时，我们也会分享一些个人生活感悟，希望通过分享，能够给你的生活带来一些启示和思考。希望你会喜欢我们的内容。
使用 JavaScript 实现倒计时、JS 定时器注意事项
1. JS 倒计时
agenda 插件需要增加番茄钟功能，在 github 上找到 usePomodoro ，看起来功能挺全的，而且使用 hook使用起来很方便，虽然 star 数量并不多，但是这个功能也不复杂，如果有问题我自己能 hold 住，所以最终就选了它。
但是在功能开发完上线后才发现，总是计时不准确，明明设置的 25min 番茄钟，结果一个小时过去了，倒计时也没跑完。
后来拿着手机对比研究一下，确定了当软件处于后台时就会出现误差。突然想起来以前也遇见过类似的情况，当浏览器 tab 处于非激活的状态时，定时器就可能不准确。
去仓库看了下代码，果然问题出在这里：
jsx
1// 原代码使用 setInterval，来计算倒计时剩余时长 2setInterval(tick, 1000);
当tab不处于激活状态（tab被隐藏，浏览器处于后台）时，setInterval 的触发间隔就并不是设定的 1000ms。这可能是浏览器出于性能与耗电等考虑设计的机制。
那么如何处理呢？
既然js不能保证代码每隔1s执行一次，就只能从外部下手。比较普遍的方法是使用系统时间作为参照物：
jsx
1function countDown(length) { 2 const start = new Date().valueOf(); 3 const timer = setInterval(() => { 4 const now = new Date().valueOf(); 5 const past = now - start; 6 if (past <= 0) { 7 console.log("count down end"); 8 clearInterval(timer); 9 } 10 }, 1000); 11}
知道开始时间及倒计时的时长后，就能算出结束时间，也能在每次定时器回调中知道已经过去的时间。将计时的任务交给系统，js 只是轮询查流逝的时间，这样就可以避免误差。
这个是我提的 pr。
这个方法也有一个问题，如果用户一直让页面处于非激活状态，在倒计时应该结束的那一刻，setInterval 可能也无法执行，需要到用户激活tab，才能再次触发。
如果需要解决这个问题，感觉一个方案是包装成 app 来进行后台保活，一个方案是把状态信息存到服务器，当计时结束时服务器给 js 发消息。
2. js 定时器注意事项
基础使用很简单，我们这里只说需要注意的几个点。
2.1 定时器嵌套
setInterval回调可以嵌入对另一个定时器的调用，为了减轻对性能的影响，一旦定时器嵌套超过5层，则浏览器将强制设置定时器最小时间间隔为 4ms。
2.2 确保代码执行时间短于定时器间隔
定时器回调属于异步任务，只有调用定时器的主线程其他代码执行完毕才会执行回调函数。如果前面的代码执行时间超过定时器间隔，那么定时器就不会在正确的时间触发。所以浏览器无法保证一定在正确的时间触发回调。
2.3 未被激活的tabs的定时最小延迟 ≥ 1000ms
为优化后台 tab 的加载损耗（以及降低耗电量），在未被激活的 tab 中定时器最小延迟时间为 1000ms。
2.4 最大延迟值
浏览器以32位带符号整数存储延时，当延时大于2147483647 毫秒 (大约 24.8 天) 时就会溢出, 此时定时器会立即执行。