WebWorker究極探索

吾乃不良人發表於2019-03-30
Web

WebWorker

MDN官方介紹

Web Workers是Web內容在後臺執行緒中執行指令碼的簡單方法。工作執行緒可以在不干擾使用者介面的情況下執行任務。此外，它們可以使用I / O執行XMLHttpRequest（儘管responseXML和channel屬性始終為null）。建立後，工作人員可以通過將訊息釋出到該程式碼指定的事件處理程式（反之亦然），將訊息傳送到建立它的JavaScript程式碼。

WebWorker API

初始化WebWorker

//判斷瀏覽器是否支援Worker
if (window.Worker) {
    const worker = new Worker('URL');
}
複製程式碼

嘗試建立健全的錯誤捕獲機制

if (window.Worker) {
    try {
        const worker = new Worker('URL');
        worker.onerror = function(msg,fileName,lineno) {
          throw msg;
        }
    } catch (err) {
      return err;
    }
    
}
 
複製程式碼

給Worker執行緒傳送訊息

//msg can be an object, an array, or a string
 let msg = {};
 worker.postMessage(msg);
複製程式碼

監聽Worker執行緒回傳訊息


worker.onmessage = function(e) {
  console.log(e.data);
}
複製程式碼

子執行緒Worker內容

// get data from html document
onmessage = function(e) {
  console.log(e.data);
}
//catch err
onerror = function(err) {
  console.log(err);
}
//some data
postMessage({});
複製程式碼

Demo

HTML Document Content

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>WebWorker</title>
</head>
<body>
<button>開啟計時器</button>
<span class="time"></span>
<script>

    document.querySelector('button')
        .addEventListener('click', function handleClick() {
            console.log('開啟定時器......');
            if (window.Worker) {
                const worker = new Worker('StartTimeLock.js');
                worker.postMessage({msg: 'User：你好，我準備開啟定時器了！', state: true});
                worker.onmessage = function (e) {
                    console.log(e.data.msg);
                    document.querySelector('.time')
                        .innerHTML = e.data.time;
                    if (e.data.time === 10) {
                        worker.terminate();
                    }
                };

            }
        }, false);
</script>
</body>
</html>
複製程式碼

StartTimeLock.js


onmessage = function (e) {
    console.log(e.data.msg);
    postMessage({msg:'Worker：Worker正在處理您的訊息！！'});
    if(e.data.state) {
        let time = 0;
        setInterval(function handleInterval() {
            postMessage({time:time++});
        },1000);
    }
};
複製程式碼

結束語

我只是個“猥瑣發育的大三銀”，哪裡寫的不對還望大佬們海涵。

相關文章