在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 03 Javascript
hover的用法及live的用法介绍(鼠标悬停效果)
Mar 29 Javascript
JQuery中DOM实现事件移除的方法
Jun 13 Javascript
基于JavaScript操作DOM常用的API小结
Dec 01 Javascript
详解微信小程序开发之城市选择器 城市切换
Jan 17 Javascript
JavaScript自执行函数和jQuery扩展方法详解
Oct 27 jQuery
vue实现element-ui对话框可拖拽功能
Aug 17 Javascript
vue中的自定义分页插件组件的示例
Aug 18 Javascript
angular4 获取wifi列表中文显示乱码问题的解决
Oct 20 Javascript
javascript中如何判断类型汇总
May 14 Javascript
微信小程序如何加载数据库真实数据的实现
Mar 04 Javascript
vue cli 3.0通用打包配置代码,不分一二级目录
Sep 02 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 heredoc和phpwind的模板技术使用方法小结
2008/03/28 PHP
PHP计划任务之关闭浏览器后仍然继续执行的函数
2010/07/22 PHP
php自动更新版权信息显示的方法
2015/06/19 PHP
php str_replace替换指定次数的方法详解
2017/05/05 PHP
Laravel事件监听器用法实例分析
2019/03/12 PHP
JQuery实现自定义对话框的代码
2008/06/15 Javascript
jquery $(document).ready() 与window.onload的区别
2009/12/28 Javascript
Javascript中正则表达式的全局匹配模式分析
2011/04/26 Javascript
一个简单的JS鼠标悬停特效具体方法
2013/06/17 Javascript
javascript中的事件代理初探
2014/03/08 Javascript
AngularJS语法详解
2015/01/23 Javascript
JS使用ajax从xml文件动态获取数据显示的方法
2015/03/24 Javascript
基于jQuery+Cookie实现的防止刷新的在线考试倒计时
2015/06/19 Javascript
在Node.js中使用HTTP上传文件的方法
2015/06/23 Javascript
JavaScript实现阿拉伯数字和中文数字互相转换
2016/06/12 Javascript
vue.js内部自定义指令与全局自定义指令的实现详解(利用directive)
2017/07/11 Javascript
highcharts.js数据绑定方式代码实例
2019/11/13 Javascript
OpenLayers3实现测量功能
2020/09/25 Javascript
JavaScript常用进制转换及位运算实例解析
2020/10/14 Javascript
关于IDEA中的.VUE文件报错 Export declarations are not supported by current JavaScript version
2020/10/17 Javascript
[00:32]2018DOTA2亚洲邀请赛出场——LGD
2018/04/04 DOTA
用Python制作简单的朴素基数估计器的教程
2015/04/01 Python
Python实现破解12306图片验证码的方法分析
2017/12/29 Python
Python Numpy:找到list中的np.nan值方法
2018/10/30 Python
只需7行Python代码玩转微信自动聊天
2019/01/27 Python
python dlib人脸识别代码实例
2019/04/04 Python
PySide2出现“ImportError: DLL load failed: 找不到指定的模块”的问题及解决方法
2020/06/10 Python
Weblogic的布署方式
2013/08/23 面试题
企业公益活动策划方案
2014/08/24 职场文书
庆六一活动总结
2014/08/29 职场文书
乡镇党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
赵乐秦在党的群众路线教育实践活动总结大会上的讲话稿
2014/10/25 职场文书
秋收起义观后感
2015/06/11 职场文书
小学运动会前导词
2015/07/20 职场文书
Python3.10的一些新特性原理分析
2021/09/15 Python
pycharm无法安装cv2模块问题
2022/05/20 Python