在Vue环境下利用worker运行interval计时器的步骤


Posted in Javascript onAugust 01, 2019

今天在code review时,发现之前遗留的问题:

在一个视频播放页面,有一个40ms的interval一直在阻碍,导致视频延时逐渐增大

于是写了一个worker单独把计时器拉出去跑了

实现步骤如下

由于用的是vue-cli,在webpack下要安装worker-loader依赖才能单独加载worker.js

npm install worker-loader --save-dev

更改 vue.config.js 文件的配置项

configureWebpack:{
  module: {
    rules: [
      {
        test: /\.worker\.js$/,
        loader: 'worker-loader',
        options: {
         inline: true,
         fallback: false,
         name: '[name]:[hash:8].js'
        }
      }
    ]
  },
}

注意,worker-loader配置项一定要写在js-loader的前边,否则报错。

下面写封装的方法,为了适配多计时器的情况,需要建一个class类

/**
 * worker类
 * export定时器方法
 * 
 */
export class workerTimer {
  constructor(){
     
  }
  timeInterval(name,interval,_this){
    console.log(name+'计时器已建立');  
    this[name] = setInterval(() => {
      _this.postMessage({name:name,message:interval/1000+'秒到了'})
    },Number(interval))
  }
}

然后用worker主方法调用这个类,e为组件内传入的计时器数组

import {workerTimer} from './workerTimer'
/**
 *通过遍历器遍历参数
 *new出新的worker类
 *调用定时器方法
 */
self.onmessage = function (e) {
  e.data.map((item) => {
   let workertimer = new workerTimer()
   workertimer.timeInterval(item.name,item.interval,self)
  })
};

在vue组件内引入worker

import Worker from './worker.js'

在methods里写一个方法,名字随便起

workerInit(){
  this.worker = new Worker();
  this.worker.postMessage(this.workerList);
  this.worker.onmessage = (params) => {
    ...
  }
},

在data里创建一个变量,格式如下:

workerList:[
  {name:'snapInterval',interval:10000},
  {name:'intervalFunc',interval:40}
],

在某个钩子内调用worker方法

mounted(){
  this.workerInit()
}

以上,具有两个定时器的work就建立好了,在主线程内可以通过worker传回的name来判断来触发回调。

销毁worker也很简单,只需要在destory时钩子里写上

this.worker.terminate();

即可

总结

以上所述是小编给大家介绍的在Vue环境下利用worker运行interval计时器的步骤,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
JavaScript中的私有成员
Sep 18 Javascript
javascript日期转换 时间戳转日期格式
Nov 05 Javascript
JS动态创建Table,Tr,Td并赋值的具体实现
Jul 05 Javascript
开源的javascript项目Kissy介绍
Nov 28 Javascript
学习javascript的闭包,原型,和匿名函数之旅
Oct 18 Javascript
Bootstrap自动适应PC、平板、手机的Bootstrap栅格系统
May 27 Javascript
json的使用小结
Jun 08 Javascript
Vue.js bootstrap前端实现分页和排序
Mar 10 Javascript
详解从react转职到vue开发的项目准备
Jan 14 Javascript
详解使用React制作一个模态框
Mar 14 Javascript
对vuex中getters计算过滤操作详解
Nov 06 Javascript
微信小程序wxml列表渲染原理解析
Nov 27 Javascript
详解Vue2.5+迁移至Typescript指南
Aug 01 #Javascript
微信小程序组件传值图示过程详解
Jul 31 #Javascript
vue.js实现回到顶部动画效果
Jul 31 #Javascript
vue实现滑动超出指定距离回顶部功能
Jul 31 #Javascript
Vue实现回到顶部和底部动画效果
Jul 31 #Javascript
详解mpvue实现对苹果X安全区域的适配
Jul 31 #Javascript
vue将后台数据时间戳转换成日期格式
Jul 31 #Javascript
You might like
php自定义apk安装包实例
2014/10/20 PHP
CI框架(ajax分页,全选,反选,不选,批量删除)完整代码详解
2016/11/01 PHP
thinkPHP+phpexcel实现excel报表输出功能示例
2017/06/06 PHP
PHP实现创建一个RPC服务操作示例
2020/02/23 PHP
改进:论坛UBB代码自动插入方式
2006/12/22 Javascript
有一段有意思的代码-javascript现实多行信息
2007/08/26 Javascript
extjs grid设置某列背景颜色和字体颜色的实现方法
2010/09/06 Javascript
js/ajax跨越访问-jsonp的原理和实例(javascript和jquery实现代码)
2012/12/27 Javascript
JQuery写动态树示例代码
2013/07/31 Javascript
JavaScript中json使用自己总结
2013/08/13 Javascript
JavaScript实现将xml转换成html table表格的方法
2015/04/17 Javascript
jQuery对html元素的取值与赋值实例详解
2015/12/18 Javascript
JavaScript记录光标在编辑器中位置的实现方法
2016/04/22 Javascript
JavaScript中 ES6 generator数据类型详解
2016/08/11 Javascript
Vue 项目代理设置的优化
2018/04/17 Javascript
JS实现生成由字母与数字组合的随机字符串功能详解
2018/05/25 Javascript
详解JavaScript对数组操作(添加/删除/截取/排序/倒序)
2019/04/28 Javascript
Vue formData实现图片上传
2019/08/20 Javascript
vue 实现路由跳转时更改页面title
2019/11/05 Javascript
微信小程序实现点击按钮后修改颜色
2019/12/05 Javascript
Nodejs封装类似express框架的路由实例详解
2020/01/05 NodeJs
[02:38]DOTA2亚洲邀请赛 IG战队巡礼
2015/02/03 DOTA
Python多进程机制实例详解
2015/07/02 Python
浅析Python基础-流程控制
2016/03/18 Python
利用PyInstaller将python程序.py转为.exe的方法详解
2017/05/03 Python
python数据批量写入ScrolledText的优化方法
2018/10/11 Python
pygame库实现移动底座弹球小游戏
2020/04/14 Python
美国综合购物商城:UnbeatableSale.com
2018/11/28 全球购物
总经理秘书的岗位职责
2013/12/27 职场文书
高校教师思想汇报
2014/01/11 职场文书
建筑安全员岗位职责
2014/03/13 职场文书
五一劳动节活动记录
2014/03/23 职场文书
python not运算符的实例用法
2021/06/30 Python
react 路由Link配置详解
2021/11/11 Javascript
Apache Kafka 分区重分配的实现原理解析
2022/07/15 Servers
AndroidStudio图片压缩工具ImgCompressPlugin使用实例
2022/08/05 Java/Android