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}
};

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/182488.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Linux shell命令

Linux shell命令 1、Shell简介 ​ Shell 是一个用 C 语言编写的程序,它是用户使用 Linux 的桥梁。Shell 既是一种命令语言,又是一种程序设计语言。 ​ Shell 是指一种应用程序,这个应用程序提供了一个界面,用户通过这个界面访问…

vue+jsonp编写可导出html的模版,可通过外部改json动态更新页面内容

效果 导出后文件结果如图所示,点击Index.html即可查看页面,页面所有数据由report.json控制,修改report.json内容即可改变index.html展示内容 具体实现 1. 编写数据存储的json文件 在index.html所在的public页面新建report.json文件&#xff…

编程语言发展史:新兴编程语言的趋势和发展

一、引言 随着计算机技术的不断发展,计算机编程语言也在不断更新和发展。新兴编程语言的出现不仅丰富了编程语言的种类,也为编程带来了更多的可能性和选择。本文将从新兴编程语言的趋势和发展入手,详细探讨新兴编程语言的特点、优势和发展前…

彩虹云商城搭建教程+源码程序

前言:域名服务器或宝塔主机商场程序在线云商城 随着电子商务的快速发展,越来越多的企业开始意识到开设一个自己的电子商城对于销售和品牌推广的重要性。然而,选择一家合适的网站搭建平台和正确地构建一个商城网站并不是一件容易的事情。本文…

PyQt基础_008_ 按钮类控件QSpinbox

基本操作 import sys from PyQt5.QtCore import * from PyQt5.QtGui import * from PyQt5.QtWidgets import *class spindemo(QWidget):def __init__(self, parentNone):super(spindemo, self).__init__(parent)self.setWindowTitle("SpinBox 例子")self.resize(300,…

数据结构与算法之递归: LeetCode 78. 子集 (Typescript版)

子集 https://leetcode.cn/problems/subsets/ 描述 给你一个整数数组 nums ,数组中的元素 互不相同 。返回该数组所有可能的子集(幂集)。解集 不能 包含重复的子集。你可以按 任意顺序 返回解集。 示例 1 输入:nums [1,2,3]…

微服务链路追踪组件SkyWalking实战

概述 微服务调用存在的问题 串联调用链路,快速定位问题;理清服务之间的依赖关系;微服务接口性能分析;业务流程调用处理顺序; 全链路追踪:对请求源头到底层服务的调用链路中间的所有环节进行监控。 链路…

电子学会C/C++编程等级考试2022年09月(三级)真题解析

C/C++等级考试(1~8级)全部真题・点这里 第1题:课程冲突 小 A 修了 n 门课程, 第 i 门课程是从第 ai 天一直上到第 bi 天。 定义两门课程的冲突程度为 : 有几天是这两门课程都要上的。 例如 a1=1,b1=3,a2=2,b2=4 时, 这两门课的冲突程度为 2。 现在你需要求的是这 n 门课…

总结-面试感悟

基础(八股文) 项目 项目很重要! 面试官招人肯定是想找有潜力的,那么如果你只会背八股文,怎么从那么多面试者中脱颖而出呢?所以一定要好好投入一个项目,对项目不停缝缝补补,并进行优…

Tableau连接到mysql数据库,配置驱动

Tableau想要连接mysql数据库进行数据的可视化,但是没有ODBC驱动,看了几篇文章写的,不是很清楚,顺便写下自己的思路。 1、下载mysql对应的ODBC驱动 首先要知道自己mysql的版本,然后下载对应的ODBC驱动。 MySQL :: Dow…

BUUCTF刷题之路-pwn-ciscn_2019_n_81

这 题查保护的时候吓了一跳,保护全开。脑子飞速旋转是要我绕过canary,PIE然后再利用栈溢出劫持程序流吗: 然后扔进IDA中查看下大致流程: 大致看出var是个数组,当var[13]17的时候就会得到system。那还不简单直接写payload: from p…

easyrecovery 16数据恢复软件2024最新免费下载地址

EasyRecovery 16是一款操作简单、功能强大数据恢复软件,通过easyrecovery可以从硬盘、光盘、U盘、数码相机、手机等各种设备中恢复被删除或丢失的文件、图片、音频、视频等数据文件。 EasyRecovery Pro 16安装步骤 一、首先需要在该页找到下载地址处选任意地址将EasyRecovery软…

Java核心知识点整理大全16-笔记

Java核心知识点整理大全-笔记_希斯奎的博客-CSDN博客 Java核心知识点整理大全2-笔记_希斯奎的博客-CSDN博客 Java核心知识点整理大全3-笔记_希斯奎的博客-CSDN博客 Java核心知识点整理大全4-笔记-CSDN博客 Java核心知识点整理大全5-笔记-CSDN博客 Java核心知识点整理大全6…

JAVA基础进阶(七)

一、集合和数组的区别 集合和数组的区别:数组的长度是固定的,集合的长度是可变的。数组既可以存储基本数据类型,也可以存储引用数据类型。集合只能存储引用数据类型,所以对于基本数据类型byte、short、int等只能存储他们对应的包装类Byte、Short、Integer。 二、集…

基于yolov2深度学习网络的打电话行为检测系统matlab仿真

目录 1.算法运行效果图预览 2.算法运行软件版本 3.部分核心程序 4.算法理论概述 4.1、YOLOv2网络原理 4.2、基于YOLOv2的打电话行为检测 5.算法完整程序工程 1.算法运行效果图预览 2.算法运行软件版本 matlab2022a 3.部分核心程序 .................................…

【C/C++】常见模拟题题解

题解 模拟双目运算符一元二次方程求解水仙花数统计学生成绩学生成绩管理模拟选举大小写字符转换最大公约数、最小公倍数字符串反序 模拟双目运算符 编写一个根据用户键入的两个操作数和一个双目运算符&#xff0c;由计算机输出结果的程序。 #include<stdio.h>int opera…

LY/T 1330-2011 抗静电木质活动地板检测

抗静电木质活动地板是指以木质材料为基材&#xff0c;与其他材料组合而成的具有抗静电功能的可拆装活动地板。 LY/T 1330-2011 抗静电木质活动地板测试&#xff1a; 测试项目 测试方法 规格尺寸及偏差 LY/T 1330 外观质量 LY/T 1330 吸水厚度膨胀率 LY/T 1330 表面耐冷…

在虚拟机搭建nignx,和使用本地访问nginx的情况

下载nginx yum install nginx 查看nginx是否安装成功。 nginx -v nginx的配置文件的目录和资源的目录。 先到nginx.conf的目录下&#xff0c;在 /etc/nginx/nginx.conf&#xff0c;编辑它。 vi /etc/nginx/nginx.conf 可以看到默认的html的目录。在 /usr/share/nginx/html 下面…

给 Redis 设置密码

给 Redis 设置密码 Redis 设置密码需要在 Redis 配置文件中进行&#xff0c;具体如下&#xff1a; 打开 redis.conf 文件。若Redis是通过源码安装的&#xff0c;则该文件默认位于 /usr/local/redis/redis.conf。 使用文本编辑器&#xff08;如vim&#xff09;打开 redis.con…

网络安全 | 使用人工智能阻止网络攻击

全球范围内分布式拒绝服务 (DDoS) 网络攻击急剧增加&#xff0c;这种数字攻击可以通过大量的互联网流量压垮目标服务器&#xff0c;从而使网站瘫痪。这种攻击每年都会发生数百万起&#xff0c;而且数量和规模都在不断增加。大约三分之一的网站宕机是由于 DDoS 攻击所致。 计算…