前言

彦祖们,前端开发中对于 setTimeout setInterval 一定用得烂熟于心了吧?

但你知道你的定时器并没那么靠谱吗?

本文涉及技术栈(非必要)

• vue2

场景复现

今天笔者在开发业务的时候就遇到了这样一个场景

前后端有一个 ws 通道,我们暂且命名为 channel

前后端约定如下:

1. 前端每隔 5000ms 发送一个 ping 消息
2. 后端收到 ping 后回复一个 pong 消息
3. 后端如果 15000ms 未收到 ping,则视为 channel 失活,直接 kill
4. kill 后前端会主动发起重连

文章还没写两分钟,一只暴躁的测试老哥说道:"你们的 ws 也太不稳定了,几十秒就断开一次?废物?"

骂骂咧咧的甩过来一张截图

笔者心想:"为什么我的界面稳如老狗?浏览器问题,绝对是浏览器问题..."

起身查看,遂发现毫无问题,和笔者一模一样的 chrome 版本...

静心而坐,对着浏览器屏幕茶颜悦色(哦,察言观色)...

10 分钟过去了,半小时过去了...还是稳如老狗,根本不断

问题分析

那么问题到底出在哪里呢?

笔者坐在测试妹纸身边仔细观察了她的操作后!

发现她不断得切屏,此时已初步心虚,不禁问道 GPT

当浏览器标签页变为非活动状态时，setInterval 和 setTimeout 的执行频率通常会被降级。大多数现代浏览器将其执行频率限制在 1 秒（1000 毫秒）或更高，以减少 CPU 和电池的消耗。

问题原因大致是这样了

问题复现

此时笔者在本地写了个 demo

理想的情况,我们这个 offset 应该是一直维持在 1000ms 左右

那么后续我们就要看页面激活 | 失活时候的情况了

页面激活时

我们先看下页面激活时的打印数据

没什么问题,符合我们的期望值

页面失活时

接下来我们,切换到其他浏览器标签,保持几分钟,几分钟后我们看下打印数据

明显发现有些数据不符合我们的期望值

甚至有些夸张到长达 41003ms,将近 40 倍,不靠谱!

寻找方案

用 setTimeout 模拟 setInterval

其实网上最多的方案就是说用 setTimeout 模拟 setInterval

但是很可惜,笔者亲自模拟下来,也是同样的结果,我们看截图

而且发现更加不靠谱了...错误的概率明显更高了...

其实可想而知,setInterval 和 setTimeout 在事件循环中都属于 Task

事件循环的优先级是一样的,同样都属于主线程任务(标记起来,后面考重点)

Web Worker

其实网上还有类似于 requestAnimationFrame 的方案

但是测试下来更离谱,就不浪费彦祖们的时间了

进入正题吧

其实上文说了,主线程任务的优先级会被降低,那么我们思考一下子线程任务呢?

子线程任务在前端领域,我们不就能想到 Web Worker 吗?

当然除了 Web Worker,还有 SharedWorker Service Worker

非本文重点,不做赘述

什么是 Web Worker

首先我们来认识下什么是 Web Worker

Web Worker 是一种运行在浏览器后台的独立 JavaScript 线程，允许我们在不阻塞主线程（即不影响页面 UI 和用户交互的情况下）执行一些耗时的任务，比如数据处理、文件操作、复杂计算等。

不阻塞主线程这恰恰是我们的所需要的!

使用 Web Worker

其实 Web Worker 在常规使用和 vue 中还是有一定的区别的

常规使用

常规使用其实非常简单,我们还是以上文中的 demo 为例

改造一下

• index.html

我们还需要一个 worker.js文件

• worker.js

切换 tab 几分钟后让我们来看看打印结果

非常完美,几乎都保持在 1000ms 左右

在 vue 中使用 Web Worker

在 vue 中使用就和常规使用有所不同了

这也是笔者今天踩坑比较多的地方

网上很多文中配置了 webpack 的 worker-loader,然后改造 vue.config.js

但是笔者多次尝试,还是各种报错(如果有大佬踩过坑,请在评论区留言)

最后笔者翻到了之前的笔记,其实早在多年之前就记录了在 vue 中使用 Web Worker 的文章

使用方式非常简单

我们只需要把 worker.js 放置于 public 目录即可!

看下我们此时的代码

• App.vue

• public worker.js

测试一下

非常完美!

解决业务问题

彦祖们此时可能要问道,你只是证明了 Web Worker 不会阻塞主进程

和你的业务有什么关系吗?

其实这还得依赖于Web Worker的通信机制

我们继续改造

• App.vue

• worker.js

封装一个 setWorkerInterval

其实有了以上的代码模型,我们就能封装一个不受主进程阻塞的定时器了

我们暂且命名它为 setWorkerInterval

函数设计

首先设计一下我们的函数

为了减少开发者心智负担

我们需要把函数设计成和 setInterval 一样的用法

我们在使用 setInterval 的时候,日常最常用的参数就是 callback 和 delay

它的返回值是一个 intervalID

由此可见我们的函数签名如下

动手实现

有了上面的函数设计,我们就开始来实现

目前我们遇到一个问题,那就是上文中的 xxx 具体是个啥?

这其实就是 Web Worker 中的 setInterval

我们只需要把 Web Worker 中的 setInterval的功能暴露给主线程不就完事了吗?

来看 代码

• setWorkerInterval.js

• worker.js

这样我们就初步完成了以上 xxx 的逻辑

但随之而来又有两个问题

1.如何触发对应业务逻辑?

2.如何清除定时器?

触发对应业务逻辑

其实第一个问题非常容易解决,我们不是传递了一个 callback 吗?

这不就是我们的业务逻辑吗

改造一下

• setWorkerInteraval.js

清除定时器

第二个问题也不难,我们思考 intervalID 的来源不就在 worker.js吗?

那我们只需要把它通知给主线程即可,直接上代码

• worker.js

• setWorkerInteraval

让我们看下使用方式

非常完美,至此,一个靠谱的定时器我们就完成了!

当然我们还可以把上文中的 1000ms 改成 delay 传参,直接看完成代码吧

完整代码

• worker.js (vue项目 需要放在 public 中)

• setWorkerInteraval

原文链接：
https://juejin.cn/post/7418391732163182607