成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

在Vue環(huán)境下利用worker運(yùn)行interval計時器

BlackFlagBin / 1970人閱讀

在Vue-Cli環(huán)境下利用worker運(yùn)行interval計時器
今天在code review時，發(fā)現(xiàn)之前遺留的問題：
在一個視頻播放頁面，有一個40ms的interval一直在阻礙，導(dǎo)致視頻延時逐漸增大
于是寫了一個worker多帶帶把計時器拉出去跑了
實現(xiàn)步驟如下
由于用的是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主方法調(diào)用這個類，e為組件內(nèi)傳入的計時器數(shù)組
import {workerTimer} from "./workerTimer"
/**
 *通過遍歷器遍歷參數(shù)
 *new出新的worker類
 *調(diào)用定時器方法
 */
self.onmessage = function (e) {
    e.data.map((item) => {
      let workertimer = new workerTimer()
      workertimer.timeInterval(item.name,item.interval,self)
    })
};
在vue組件內(nèi)引入worker
import Worker from "./worker.js"
在methods里寫一個方法，名字隨便起
workerInit(){
    this.worker = new Worker();
    this.worker.postMessage(this.workerList);
    this.worker.onmessage = (params) => {
        ...
    }
},
在data里創(chuàng)建一個變量，格式如下：
workerList:[
    {name:"snapInterval",interval:10000},
    {name:"intervalFunc",interval:40}
],
在某個鉤子內(nèi)調(diào)用worker方法
mounted(){
    this.workerInit()
}
以上，具有兩個定時器的work就建立好了，在主線程內(nèi)可以通過worker傳回的name來判斷來觸發(fā)回調(diào)。
銷毀worker也很簡單，只需要在destory時鉤子里寫上
this.worker.terminate();
即可

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/106263.html

相關(guān)文章

  • [Javascript] 實現(xiàn)setInterval函數(shù)

    摘要：更方便的在于，由于自帶定時器功能，我們甚至不用自己去維護(hù)一個時間戳。請注意這里由于沒有調(diào)用另一個腳本，我們通過和的方式將我們的定時器程序傳入中。 問題 經(jīng)常使用Javascript的同學(xué)一定對setInterval非常熟悉，當(dāng)使用setInterval(callback, timer)時，每經(jīng)過timer毫秒時間，系統(tǒng)都將調(diào)用一次callback。請問全局如果沒有提供setInterv...

    zhangwang 評論0 收藏0

  • Swoole 源碼分析——Server模塊之Timer模塊與時間輪算法

    摘要：當(dāng)其就緒時，會調(diào)用執(zhí)行定時函數(shù)。進(jìn)程超時停止進(jìn)程將要停止時，并不會立刻停止，而是會等待事件循環(huán)結(jié)束后停止，這時為了防止進(jìn)程不退出，還設(shè)置了的延遲，超過就會停止該進(jìn)程。當(dāng)允許空閑時間小于時，統(tǒng)一每隔檢測空閑連接。 前言 swoole 的 timer 模塊功能有三個：用戶定時任務(wù)、剔除空閑連接、更新 server 時間。timer 模塊的底層有兩種，一種是基于 alarm 信號，一種是基于...

    qieangel2013 評論0 收藏0

  • 瀏覽器渲染機(jī)制

    摘要：瀏覽器渲染進(jìn)程瀏覽器內(nèi)核進(jìn)程，內(nèi)部是多線程的默認(rèn)每個頁面一個進(jìn)程，互不影響。事件觸發(fā)線程歸屬于瀏覽器而不是引擎，用來控制事件循環(huán)可以理解成引擎自己都忙不過來，需要瀏覽器另開線程協(xié)助。 線程和進(jìn)程 進(jìn)程和線程的概念可以這樣理解： 進(jìn)程是一個工廠，工廠有它的獨(dú)立資源--工廠之間相互獨(dú)立--線程是工廠中的工人，多個工人協(xié)作完成任務(wù)--工廠內(nèi)有一個或多個工人--工人之間共享空間 工廠有多個工人...

    appetizerio 評論0 收藏0

  • 瀏覽器渲染機(jī)制

    摘要：瀏覽器渲染進(jìn)程瀏覽器內(nèi)核進(jìn)程，內(nèi)部是多線程的默認(rèn)每個頁面一個進(jìn)程，互不影響。事件觸發(fā)線程歸屬于瀏覽器而不是引擎，用來控制事件循環(huán)可以理解成引擎自己都忙不過來，需要瀏覽器另開線程協(xié)助。 線程和進(jìn)程 進(jìn)程和線程的概念可以這樣理解： 進(jìn)程是一個工廠，工廠有它的獨(dú)立資源--工廠之間相互獨(dú)立--線程是工廠中的工人，多個工人協(xié)作完成任務(wù)--工廠內(nèi)有一個或多個工人--工人之間共享空間 工廠有多個工人...

    lncwwn 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<