前端如何实现一个长周期的定时任务

262 阅读2分钟

一. Web Worker 是干什么的?

web worker 是运行在后台的 JavaScript,独立于其他脚本,不会影响页面的性能。您可以继续做任何愿意做的事情:点击、选取内容等等,而此时 web worker 在后台运行。(是不是很通俗易懂✌✌)

二. 它的使用场景

  1. 长周期的定时任务(例如:每天00:00 执行一次api请求)
  2. 可以用于执行一些耗时的计算、网络请求、数据处理等任务,提高应用的性能和响应速度。
  3. 大文件上传(大文件大家都知道是非常耗时的,可放在Worker 线程在后台运行)

三. 为什么不用定时器(setTimeout、setInterval)

大家都知道定时器都是耗性能的,用不好可能会存在很多副作用。有时候定时器好像并没有按照我们的预期去执行,比如我们常遇到的setTimeout(()=>{},0)它有时候并不是按我们预期的立马就执行。定时器有延迟执行时间有最大值,(delay)大于 2147483647 毫秒 (大约24.8 天)时就会溢出,导致定时器将会被立即执行(官方说明)

setTimeout 的第二个参数设置为 0 (未设置、小于 0、大于 2147483647 时都默认为 0)的时候,意味着马上执行,或者尽快执行。 说了这么多总结一下子,setTimeout delay 有限制,setInterval 做轮询是可以的,但放在主线程并不是好的方案

四. “一个字干”,咱上代码

const new_worker = new Worker("workers.js");
new_worker.onmessage = function (event) {
      console.log('打印接收的值',event.data);
};
workers.js 代码
var i=0; 
function timedCount()  
{  
    i=i+1;  
    postMessage(i);  
    setTimeout("timedCount()",500);  
}  

timedCount();

new_worker.terminate(); //立即终止线程

github: github.com/Bun800/web-…

五. 总结

Web Worker 的作用就是为 JavaScript 创造多线程环境 , 在项目中时间周期较短的定时任务可以使用定时器poll,较长的周期显然用定时器就不是很好的解决方案。Web Worker 的出现可以在不影响主线程的情况下,去做一些后台任务。Web Worker 就讲到这里了。