在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之对系统的toFixed()方法的修正
May 08 Javascript
javascript 火狐(firefox)不显示本地图片问题解决
Jul 05 Javascript
点图片上一页下一页翻页效果
Jul 09 Javascript
javascript中键盘事件用法实例分析
Jan 30 Javascript
JavaScript获取页面上被选中文字的方法技巧
Mar 13 Javascript
JS仿京东移动端手指拨动切换轮播图效果
Apr 10 Javascript
react性能优化达到最大化的方法 immutable.js使用的必要性
Mar 09 Javascript
d3.js实现立体柱图的方法详解
Apr 28 Javascript
javascript判断一个变量是数组还是对象
Apr 10 Javascript
解决Layui数据表格显示无数据提示的问题
Nov 14 Javascript
vue 使用vant插件做tabs切换和无限加载功能的实现
Nov 04 Javascript
详解Vue3 Teleport 的实践及原理
Dec 02 Vue.js
详解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生成月历代码
2007/06/14 PHP
destoon调用企业会员公司形象图片的实现方法
2014/08/21 PHP
详解PHP数组赋值方法
2015/11/07 PHP
treepanel动态加载数据实现代码
2012/12/15 Javascript
JavaScript的常见兼容问题及相关解决方法(chrome/IE/firefox)
2013/12/31 Javascript
JavaScript极简入门教程(一):基础篇
2014/10/25 Javascript
JQuery中上下文选择器实现方法
2015/05/18 Javascript
JS获取数组最大值、最小值及长度的方法
2015/11/24 Javascript
jQuery插件之Tocify动态节点目录菜单生成器附源码下载
2016/01/08 Javascript
jQuery实现图片局部放大镜效果
2016/03/17 Javascript
原生js实现淘宝购物车功能
2020/06/23 Javascript
JSON 数据详解及实例代码分析
2017/01/20 Javascript
Vue实现点击时间获取时间段查询功能
2020/08/21 Javascript
JS栈stack类的实现与使用方法示例
2019/01/31 Javascript
使用 Vue cli 3.0 构建自定义组件库的方法
2019/04/30 Javascript
原生js实现trigger方法示例代码
2019/05/22 Javascript
在小程序中推送模板消息的实现方法
2019/07/22 Javascript
[05:05]给小松五分钟系列 第二期介绍为什么打DOTA2
2014/07/02 DOTA
[00:09]DOTA2全国高校联赛 精彩活动引爆全场
2018/05/30 DOTA
python编写暴力破解zip文档程序的实例讲解
2018/04/24 Python
[原创]Python入门教程1. 基本运算【四则运算、变量、math模块等】
2018/10/28 Python
python实现给scatter设置颜色渐变条colorbar的方法
2018/12/13 Python
python用win32gui遍历窗口并设置窗口位置的方法
2019/07/26 Python
python将print输出的信息保留到日志文件中
2019/09/27 Python
python tkinter之 复选、文本、下拉的实现
2020/03/04 Python
基于Python快速处理PDF表格数据
2020/06/03 Python
Django form表单与请求的生命周期步骤详解
2020/06/07 Python
使用Python快速打开一个百万行级别的超大Excel文件的方法
2021/03/02 Python
马来西亚在线药房:RoyalePharma
2019/12/01 全球购物
船舶专业个人求职信范文
2014/01/02 职场文书
大三预备党员入党思想汇报
2014/01/08 职场文书
元旦晚会邀请函
2014/01/27 职场文书
房屋转让协议书
2014/04/11 职场文书
个人求职信范文
2014/05/24 职场文书
2015年党风廉政承诺书
2015/01/22 职场文书
Java无向树分析 实现最小高度树
2022/04/09 Javascript