在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 相关文章推荐
表单切换,用回车键替换Tab健(不支持IE)
Jul 20 Javascript
Jquery插件之打造自定义的select标签
Nov 30 Javascript
JavaScript代码应该放在HTML代码哪个位置比较好?
Oct 16 Javascript
浅析script标签中的defer与async属性
Nov 30 Javascript
Bootstrap实现的经典栅格布局效果实例【附demo源码】
Mar 30 Javascript
JavaScript错误处理和堆栈追踪详解
Apr 18 Javascript
javascript 初学教程及五子棋小程序的简单实现
Jul 04 Javascript
详解10分钟学会vue滚动行为
Sep 21 Javascript
通过函数作用域和块级作用域看javascript的作用域链
Aug 05 Javascript
简单的React SSR服务器渲染实现
Dec 11 Javascript
详解vue组件之间的通信
Aug 30 Javascript
jquery插件实现轮播图效果
Oct 19 jQuery
详解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判断当前用户已在别处登录的方法
2015/01/06 PHP
PHP遍历数组的方法汇总
2015/04/30 PHP
php实现的网络相册图片防盗链完美破解方法
2015/07/01 PHP
PHP计算当前坐标3公里内4个角落的最大最小经纬度实例
2016/02/26 PHP
PDO的安全处理与事物处理方法
2016/10/31 PHP
静态页面下用javascript操作ACCESS数据库(读增改删)的代码
2007/05/14 Javascript
js 对象是否存在判断
2009/07/15 Javascript
jQuery UI AutoComplete 自动完成使用小记
2010/08/21 Javascript
用js模拟JQuery的show与hide动画函数代码
2010/09/20 Javascript
js截取中英文字符串、标点符号无乱码示例解读
2014/04/17 Javascript
jquery $(document).ready()和window.onload的区别浅析
2015/02/04 Javascript
javascript实现给定半径求出圆的面积
2015/06/26 Javascript
jQuery实现提示密码强度的代码
2015/07/15 Javascript
jQuery+css3实现Ajax点击后动态删除功能的方法
2015/08/10 Javascript
javascript实现无缝上下滚动特效
2015/12/16 Javascript
20分钟轻松创建自己的Bootstrap站点
2016/05/12 Javascript
BootStrap中的表单大全
2016/09/07 Javascript
微信小程序 教程之wxapp 视图容器 view
2016/10/19 Javascript
angularjs2 ng2 密码隐藏显示的实例代码
2017/08/01 Javascript
JavaScript实现各种排序的代码详解
2017/08/28 Javascript
EasyUI的DataGrid绑定Json数据源的示例代码
2017/12/16 Javascript
如何解决js函数防抖、节流出现的问题
2019/06/17 Javascript
typescript nodejs 依赖注入实现方法代码详解
2019/07/21 NodeJs
layui自己添加图片按钮并点击跳转页面的例子
2019/09/14 Javascript
微信内置开发 iOS修改键盘换行为搜索的解决方案
2019/11/06 Javascript
python基础教程之实现石头剪刀布游戏示例
2014/02/11 Python
详解Python中with语句的用法
2015/04/15 Python
Python使用minidom读写xml的方法
2015/06/03 Python
Python实现的多线程http压力测试代码
2017/02/08 Python
PyCharm配置mongo插件的方法
2018/11/30 Python
ORACLE十问
2015/04/20 面试题
Java语言的优势
2015/01/10 面试题
工程地质勘察专业大学生求职信
2013/10/13 职场文书
《颐和园》教学反思
2014/02/26 职场文书
中文专业毕业生自荐信
2014/05/24 职场文书
创建文明城市标语
2014/06/16 职场文书