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

　　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 "http://www.jb51.net/javascript/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

　　}

　　};

　　总结

　　到此这篇关于vuejs如何解决浏览器切换页面后setInterval计时器停止执行问题的文章就介绍到这了,更多相关vue setInterval计时器停止执行问题内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！