国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

在Vue環境下利用worker運行interval計時器

BlackFlagBin / 1898人閱讀

在Vue-Cli環境下利用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();
即可

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/106263.html

相關文章

  • [Javascript] 實現setInterval函數

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

    zhangwang 評論0 收藏0

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

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

    qieangel2013 評論0 收藏0

  • 瀏覽器渲染機制

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

    appetizerio 評論0 收藏0

  • 瀏覽器渲染機制

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

    lncwwn 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<