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

今天在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计时器的步骤,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

赞 (0)

相关推荐

  • setInterval计时器不准的问题解决方法

    在js中如果打算使用setInterval进行倒数,计时等功能,往往是不准确的,因为setInterval的回调函数并不是到时后立即执行,而是等系统计算资源空闲下来后才会执行.而下一次触发时间则是在setInterval回调函数执行完毕之后才开始计时,所以如果setInterval内执行的计算过于耗时,或者有其他耗时任务在执行,setInterval的计时会越来越不准,延迟很厉害. 下面的代码可以说明这个问题 复制代码 代码如下: var startTime = new Date().getTi

  • Vue 使用计时器实现跑马灯效果的实例代码

    Vue 使用计时器实现跑马灯效果的实例代码

    Vue 使用计时器实现跑马灯效果,代码如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="

  • JS使用setInterval实现的简单计时器功能示例

    JS使用setInterval实现的简单计时器功能示例

    本文实例讲述了JS使用setInterval实现的简单计时器功能.分享给大家供大家参考,具体如下: 使用setInterval实现计时,并且满60秒向分钟进一,满60分钟向小时进一. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>www.jb51.net JS计时器</title> <script> window.onload =

  • vue 计时器组件的实现代码

    整理文档,搜刮出一个vue 计时器组件的代码,稍微整理精简一下做下分享. <template> <div> <span :sendSync="sendSync" :autoStart="autoStart" :defaultVal="defaultVal" >{{countString}}</span> </div> </template> <script> ex

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

    今天在code review时,发现之前遗留的问题: 在一个视频播放页面,有一个40ms的interval一直在阻碍,导致视频延时逐渐增大 于是写了一个worker单独把计时器拉出去跑了 实现步骤如下 由于用的是vue-cli,在webpack下要安装worker-loader依赖才能单独加载worker.js npm install worker-loader --save-dev 更改 vue.config.js 文件的配置项 configureWebpack:{ module: { rul

  • 利用DOSBox运行汇编的详细步骤

    利用DOSBox运行汇编的详细步骤

    最近学校要求用汇编写课设(本来复习的好好的,结果笔试取消),无奈只有配置环境自己写课设了.起初是利用VS2017进行配置,但后面运行好像有些问题,就想到用DOSBox了.以下是详细步骤: 第一步:下载好相关文件,文件我放在下面链接里:资源文件提取码:edtx 第二步,将masm文件夹里面所有文件放到一个特定的文件夹,比如我的f:\masm 第三步,安装DOSBox,里面有个压缩包,直接打开安装就行. 第四步,双击DOSBox文件夹下DOSBox 0.74 Options.bat文件,打开dos-

  • windows环境下mysql数据库的主从同步备份步骤(单向同步)

    windows下mysql双向同步备份实现方法以下的文章主要讲述的是在windows环境下实现MySQL数据库的主从同步备份的正确操作方案,我在一些相关的网站看见关于windows环境下实现MySQL数据库的主从同步备份的操作步骤描述,但是很少有对其成功操作到底的,所以拿出此篇较为完整的方案与大家一起分享. 以下配置在本机上已经成功: 实现功能:A为主服务器,B为从服务器,初始状态时,A和B中的数据信息相同,当A中的数据发生变化时,B也跟着发生相应的变化,使得A和B的数据信息同步,达到备份的目的

  • 在Apache环境下成功的运行ASP.NET的注意事项

    在Apache环境下成功的运行ASP.NET的注意事项

    由于公司的产品在新的版本中,需要考虑一些新的部署方式,所以又抽空关注了一下.NET跨平台的一些解决方案.虽然Mono Project对基于.NET开发的人来说都不陌生,不过由于Mono是比较狭义的跨平台(因为它是OS级别的)概念.而从广义的角度来说,使用不同的Web Server也可以算是一种垮平台. 缘起是由于IIS的口碑实在太滥,以至于不少的关键应用场景明文禁止安装和使用IIS.而从ASP.NET的执行原理来看,它是通过一个Web Server处理tcp请求,然后把对ASPX执行和呈现交于使

  • php环境下利用session防止页面重复刷新的具体实现

    b.php的代码 复制代码 代码如下: <?php //只能通过post方式访问 if ($_SERVER['REQUEST_METHOD'] == 'GET') {header('HTTP/1.1 404 Not Found'); die('亲,页面不存在');} session_start(); $fs1=$_POST['a']; $fs2=$_POST['b']; //防刷新时间,单位为秒 $allowTime = 30; //读取访客ip,以便于针对ip限制刷新 /*获取真实ip开始*/

  • windows环境下php配置memcache的具体操作步骤

    windows环境下php配置memcache的具体操作步骤

    首先要安装好php和apache环境.我用的是wamp整合的套件php 5.2.8apache 2.2.1.1这些都准备好了后,就到 memcache 官网去下载 windows 下的 memcache.exe 这个程序 然后把他放在 c:\memcache 目录下打开 cmd 命令 输入cd c:\memcache 安装memcache.exe -p install 安装完成后memcache.exe -p start 成功开启 memcache后 就到 php/ext 目录下 把 php_m

  • linux环境下安装pyramid和新建项目的步骤

    1. 安装python虚拟环境 复制代码 代码如下: virtualenv --no-site-packages env 2. 安装pyramid 复制代码 代码如下: $ env/bin/easy_install pyramid 3. 使用alchemy模板,创建一个项目 复制代码 代码如下: pcreate -s alchemy MyProject 4. 安装项目的依赖 复制代码 代码如下: python setup.py develop 5. 运行单元测试 复制代码 代码如下: pytho

  • Windows10下利用DOSBOX和MASM32搭建汇编语言开发环境

    1 工具准备 1)下载DOSBOX 工具介绍:DOSBox 是一个 DOS 模拟程序,由于它采用的是 SDL 库,所以可以很方便的移植到其他的平台.目前,DOSBox 已经支持在 Windows.Linux.Mac OS X.BeOS .palmOS.Android .webOS.os/2等系统中运行.不少DOS下的游戏都可以直接在该平台上运行. 工具官网:http://www.dosbox.com/ 项目主页:http://sourceforge.net/projects/dosbox/ 下载

  • vue cli4下环境变量和模式示例详解

    本文介绍了vue cli4下环境变量和模式示例详解,分享给大家,具体如下: 官方文档 环境变量 一个环境变量文件只包含环境变量的键值对: NODE_ENV=development VUE_APP_BASE_URL=http://127.0.0.1:8080/ 注意: NODE_ENV - 是 "development"."production" ."test"或者自定义的值.具体的值取决于应用运行的模式 BASE_URL - 会和 vue.con

  • C++开发在IOS环境下运行的LRUCache缓存功能

    本文着重介绍如何在XCODE中,通过C++开发在IOS环境下运行的缓存功能.算法基于LRU(最近最少使用).有关lru详见: http://en.wikipedia.org/wiki/Page_replacement_algorithm#Least_recently_used 之前在网上看到过网友的一个C++实现,感觉不错,所以核心代码就采用了他的设计.原作者通过两个MAP对象来记录缓存数据和LRU队列,注意其中的LRU队列并不是按照常用的方式使用LIST链表,而是使用MAP来代替LIST,有关

随机推荐