vuejs: 解决浏览器切换页面后setInterval计时器停止执行的问题
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue
免费下载资源
·
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
}
};
// 主线程关闭worker线程
Worker.terminate();
GitHub 加速计划 / vu / vue
207.54 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:2 个月前 )
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 4 个月前
e428d891
Updated Browser Compatibility reference. The previous currently returns HTTP 404. 5 个月前
更多推荐
已为社区贡献3条内容
所有评论(0)