vuejs: 解决浏览器切换页面后setInterval计时器停止执行的问题

时间:2025-01-22 16:08:10

setInterval定时器是基于当前页面的,如果切换到其他页面,定时器会被暂停。这是浏览器的一种优化措施,以减少不必要的性能消耗。
如果需要在切换页面后继续执行定时器,可以使用Web Worker,它是在后台运行的程序,不受页面切换影响。在Web Worker中,可以使用定时器setInterval来执行某些操作。
Worker-Loader插件的主要作用是将我们的JavaScript文件转换为Web Worker线程。它可以将我们的JavaScript文件打包成一个独立的文件,该文件可以在Web Worker中运行。
1、安装:

npm install worker-loader -D

2、配置:在文件中,

rules:[
    {
        test: /\.worker\.js$/,
        use: { loader: "worker-loader" },
    },
]

3、创建js文件:

var timer = null;
('message', function (e) {
  if ( == 'start') {
    var interval = ;
    timer = setInterval(function () {
      ({ type: 'message' });
    }, interval);
  }
  if ( == 'stop') {
    clearInterval(timer);
    timer = null;
    ({ type: 'stop' });
  }
}, false);

vue文件中引入并使用

import myWorker from "./";
const Worker = new myWorker();
({
	 type: "start",
 	interval: 1000
});
 = (event)=> {
     // 收息消息
     if ( == 'message') {
   		// TODO: 收到消息后
	 }
    // 结束命令
	 if ( == 'stop') {
 		 // TODO: STOP
 	}
};
// 主线程关闭worker线程 
();