晋江市住房和城乡建设网站培训机构网站设计

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

npm install worker-loader -D

2、配置：在webpack.base.config.js文件中，

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

3、创建js文件：my.worker.js

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

vue文件中引入并使用

import myWorker from "./my.worker.js";
const Worker = new myWorker();
Worker.postMessage({type: "start",interval: 1000
});
Worker.onmessage = (event)=> {// 收息消息if (event.data.type == 'message') {// TODO: 收到消息后}// 结束命令if (event.data.type == 'stop') {// TODO: STOP}
};