vuejs如何解決瀏覽器切換頁面后setInterval計(jì)時(shí)器停止執(zhí)行的問題
setInterval定時(shí)器是基于當(dāng)前頁面的，如果切換到其他頁面，定時(shí)器會(huì)被暫停。這是瀏覽器的一種優(yōu)化措施，以減少不必要的性能消耗。
如果需要在切換頁面后繼續(xù)執(zhí)行定時(shí)器，可以使用Web Worker，它是在后臺(tái)運(yùn)行的程序，不受頁面切換影響。在Web Worker中，可以使用定時(shí)器setInterval來執(zhí)行某些操作。
Worker-Loader插件的主要作用是將我們的JavaScript文件轉(zhuǎn)換為Web Worker線程。它可以將我們的JavaScript文件打包成一個(gè)獨(dú)立的文件,該文件可以在Web Worker中運(yùn)行。
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é)
到此這篇關(guān)于vuejs如何解決瀏覽器切換頁面后setInterval計(jì)時(shí)器停止執(zhí)行問題的文章就介紹到這了,更多相關(guān)vue setInterval計(jì)時(shí)器停止執(zhí)行問題內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
賴注入的方式共享數(shù)據(jù)在Vue中是一種高級(jí)特性,它主要用于開發(fā)插件或庫,或者處理一些特殊的場(chǎng)景,這篇文章主要介紹了Vue 使用依賴注入的方式共享數(shù)據(jù),需要的朋友可以參考下2023-11-11
這篇文章主要介紹了vue3響應(yīng)式API之ref的使用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
vue?serve及其與vue-cli-service?serve之間的關(guān)系解讀
這篇文章主要介紹了vue?serve及其與vue-cli-service?serve之間的關(guān)系,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
Vue.js 單頁面多路由區(qū)域操作的實(shí)例詳解
這篇文章主要介紹了 Vue.js 單頁面多路由區(qū)域操作的實(shí)例詳解的相關(guān)資料,需要的朋友可以參考下2017-07-07
前后端分離進(jìn)行項(xiàng)目開發(fā),跨域問題不可避免,下面這篇文章主要給大家介紹了關(guān)于vue中前端代理跨域問題的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-04-04
這篇文章主要為大家分享了一篇值得收藏的vuejs安裝教程，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-11-11
Vue中的路由跳轉(zhuǎn)及傳參的多種方法小結(jié)
這篇文章主要介紹了Vue中的路由跳轉(zhuǎn)及傳參的多種方法小結(jié),本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2023-11-11
Vue3+element實(shí)現(xiàn)表格數(shù)據(jù)導(dǎo)出
這篇文章主要為大家學(xué)習(xí)介紹了Vue3如何利用element實(shí)現(xiàn)表格數(shù)據(jù)導(dǎo)出功能，文中的示例代碼講解詳細(xì)，感興趣的小伙伴快跟隨小編一起學(xué)習(xí)一下吧2023-07-07
vue3+element 分片上傳與分片下載功能實(shí)現(xiàn)方法詳解
這篇文章主要介紹了vue3+element 分片上傳與分片下載功能實(shí)現(xiàn)方法,結(jié)合實(shí)例形式詳細(xì)分析了vue3+element 分片上傳與下載相關(guān)實(shí)現(xiàn)技巧與操作注意事項(xiàng),需要的朋友可以參考下2023-06-06
這篇文章主要介紹了Vue作用域插槽slot-scope實(shí)例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-09-09