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

更新时间：2024年01月18日 10:56:41 作者：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计时器停止执行问题内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

vue中改变滚动条样式的方法
这篇文章主要介绍了vue中改变滚动条样式的方法,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-03-03
vue-cli3.0+element-ui上传组件el-upload的使用
这篇文章主要介绍了vue-cli3.0+element-ui上传组件el-upload的使用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-12-12
详解Vue项目中实现锚点定位
这篇文章主要介绍了Vue项目中实现锚点定位，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-04-04
@error函数vue图片加载失败空白页解决方案
这篇文章主要介绍了@error函数vue图片加载失败空白页解决方案，有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
2023-08-08
vue中实现千位分隔符的示例代码
本文主要介绍了vue中实现千位分隔符的示例代码,主要两种方法,一种是某一个字段转换,一种是表格table中的整列字段转换,具有一定的参考价值,感兴趣的可以了解一下
2023-11-11
vue3+ts+vant移动端H5项目搭建的实现步骤
本文主要介绍了vue3+ts+vant移动端H5项目搭建，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-06-06
vue3源码剖析之简单实现方法
源码的重要性相信不用再多说什么了吧,特别是用Vue 框架的,一般在面试的时候面试官多多少少都会考察源码层面的内容,下面这篇文章主要给大家介绍了关于vue3源码剖析之简单实现的相关资料,需要的朋友可以参考下
2021-09-09
vue图片懒加载代码实现
这篇文章主要给大家介绍了关于vue图片懒加载代码实现的相关资料,所谓图片懒加载是指当我们浏览页面时,只加载我们浏览器可视区的图片,向下滚动时再继续加载后面的图片,需要的朋友可以参考下
2023-07-07
Vue使用Swiper封装轮播图组件的方法详解
Swiper是一个很常用的用于实现各种滑动效果的插件，PC端和移动端都能很好的适配。本文将利用Swiper实现封装轮播图组件，感兴趣的可以了解一下
2022-09-09
Vue加入购物车判断token添加登录提示功能
加入购物车，是一个登录后的用户才能进行的操作，所以需要进行鉴权判断，判断用户token是否存在，这篇文章主要介绍了Vue加入购物车判断token添加登录提示,需要的朋友可以参考下
2023-11-11