vuejs如何解決瀏覽器切換頁面后setInterval計時器停止執(zhí)行的問題

更新時間：2024年01月18日 10:56:41 作者：whatever?who?cares

setinterval()是定時調(diào)用的函數(shù),可按照指定的周期（以毫秒計）來調(diào)用函數(shù)或計算表達式,這篇文章主要給大家介紹了關于vuejs如何解決瀏覽器切換頁面后setInterval計時器停止執(zhí)行的問題,需要的朋友可以參考下

setInterval定時器是基于當前頁面的，如果切換到其他頁面，定時器會被暫停。這是瀏覽器的一種優(yōu)化措施，以減少不必要的性能消耗。

如果需要在切換頁面后繼續(xù)執(zhí)行定時器，可以使用Web Worker，它是在后臺運行的程序，不受頁面切換影響。在Web Worker中，可以使用定時器setInterval來執(zhí)行某些操作。

Worker-Loader插件的主要作用是將我們的JavaScript文件轉(zhuǎn)換為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、創(chuàng)建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: 收到消息后
	 }
    // 結(jié)束命令
	 if (event.data.type == 'stop') {
 		 // TODO: STOP
 	}
};

總結(jié)

到此這篇關于vuejs如何解決瀏覽器切換頁面后setInterval計時器停止執(zhí)行問題的文章就介紹到這了,更多相關vue setInterval計時器停止執(zhí)行問題內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

Element?UI/Plus中全局修改el-table默認樣式的解決方案
element ui官方封裝好的el-table組件,好用是挺好用的,但不可避免的是默認的樣式,下面這篇文章主要給大家介紹了關于Element?UI/Plus中全局修改el-table默認樣式的解決方案,需要的朋友可以參考下
2023-02-02
前端VUE雙語實現(xiàn)方案詳細教程
在項目需求中我們會遇到國際化的中英文切換,這篇文章主要給大家介紹了關于前端VUE雙語實現(xiàn)方案的相關資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下
2024-08-08
記一次用ts+vuecli4重構項目的實現(xiàn)
這篇文章主要介紹了記一次用ts+vuecli4重構項目的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2020-05-05
Vue中自定義標簽及其使用方式
這篇文章主要介紹了Vue中自定義標簽及其使用方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-06-06
vuex數(shù)據(jù)狀態(tài)持久化問題
這篇文章主要介紹了vuex數(shù)據(jù)狀態(tài)持久化問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2023-10-10
vue 自動生成swagger接口請求文件的方法
這篇文章主要介紹了vue 自動生成swagger接口請求文件的方法,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2023-01-01
Vue.js結(jié)合bootstrap實現(xiàn)分頁控件
這篇文章主要為大家詳細介紹了Vue.js 合bootstrap實現(xiàn)分頁控件的相關資料，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-03-03
Vue?Canvas實現(xiàn)電子簽名
這篇文章主要為大家詳細介紹了Vue?Canvas實現(xiàn)電子簽名，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-07-07
使用vscode添加vue模板步驟示例
這篇文章主要為大家介紹了vscode添加vue模板步驟示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2022-08-08
Vue3+antDesignVue實現(xiàn)表單校驗的方法
這篇文章主要為大家詳細介紹了基于Vue3和antDesignVue實現(xiàn)表單校驗的方法,文中的示例代碼講解詳細,具有一定的參考價值,需要的小伙伴可以了解下
2024-01-01