在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 相关文章推荐
使用iframe window的scroll方法控制iframe页面滚动
Mar 05 Javascript
js动态创建及移除div的方法
Jun 03 Javascript
javascript实现确定和取消提示框效果
Jul 10 Javascript
js焦点文字滚动效果代码分享
Aug 25 Javascript
jQuery选择器用法实例详解
Dec 17 Javascript
javascript时间差插件分享
Jul 18 Javascript
Node.js配合node-http-proxy解决本地开发ajax跨域问题
Aug 31 Javascript
vue2实现可复用的轮播图carousel组件详解
Nov 27 Javascript
vue todo-list组件发布到npm上的方法
Apr 04 Javascript
详解vue-cli中模拟数据的两种方法
Jul 03 Javascript
vue 项目地址去掉 #的方法
Oct 20 Javascript
玩转Koa之koa-router原理解析
Dec 29 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
php5中date()得出的时间为什么不是当前时间的解决方法
2008/06/30 PHP
php警告Creating default object from empty value 问题的解决方法
2014/04/02 PHP
PHP连接SQL Server的方法分析【基于thinkPHP5.1框架】
2019/05/06 PHP
javascript改变position值实现菜单滚动至顶部后固定
2013/01/18 Javascript
使用apply方法实现javascript中的对象继承
2013/12/16 Javascript
javascript中的self和this用法小结
2014/02/08 Javascript
什么是MEAN?JavaScript编程中的MEAN是什么意思?
2014/12/18 Javascript
Web表单提交之disabled问题js解决方法
2015/01/13 Javascript
微信小程序 教程之模板
2016/10/18 Javascript
javascript垃圾收集机制的原理分析
2016/12/08 Javascript
基于jQuery实现咖啡订单管理简单应用
2017/02/10 Javascript
Vue服务器渲染Nuxt学习笔记
2018/01/31 Javascript
Vue表单及表单绑定方法
2018/09/04 Javascript
浅谈vue 单文件探索
2018/09/05 Javascript
深入理解JavaScript 中的执行上下文和执行栈
2018/10/23 Javascript
[03:17]DOTA2-DPC中国联赛1月29日Recap集锦
2021/03/11 DOTA
基于python的汉字转GBK码实现代码
2012/02/19 Python
python使用win32com库播放mp3文件的方法
2015/05/30 Python
python中urllib.unquote乱码的原因与解决方法
2017/04/24 Python
PyQt5每天必学之单行文本框
2018/04/19 Python
Python hashlib模块用法实例分析
2018/06/12 Python
Numpy之random函数使用学习
2019/01/29 Python
windows下python安装pip方法详解
2020/02/10 Python
Django数据库操作之save与update的使用
2020/04/01 Python
解决Jupyter notebook中.py与.ipynb文件的import问题
2020/04/21 Python
Python字符串函数strip()原理及用法详解
2020/07/23 Python
CSS3 :nth-child()伪类选择器实现奇偶行显示不同样式
2013/11/05 HTML / CSS
HTML5 画布canvas使用方法
2016/03/18 HTML / CSS
详解HTML5 Canvas绘制不规则图形时的非零环绕原则
2016/03/21 HTML / CSS
CK巴西官方网站:Calvin Klein巴西
2019/07/19 全球购物
你对IPv6了解程度
2016/02/09 面试题
电子商务专员岗位职责
2013/12/11 职场文书
小学生中国梦演讲稿
2014/04/23 职场文书
廉政教育的心得体会
2014/09/01 职场文书
市场部岗位职责范本
2015/04/15 职场文书
2016秋季运动会开幕词
2016/03/04 职场文书