vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue setInterval计时器停止执行问题

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

作者：whatever who cares

setinterval()是定时调用的函数,可按照指定的周期（以毫秒计）来调用函数或计算表达式,这篇文章主要给大家介绍了关于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 "./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计时器停止执行问题内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

阅读全文