WebWorker究極探索
摘要：
Web Workers是Web內容在後臺執行緒中執行指令碼的簡單方法。工作執行緒可以在不干擾使用者介面的情況下執行任務。此外，它們可以使用I / O執行XMLHttpRequest（儘管responseXML和channel屬性始終為null）。建立後，工作人員可以通過將訊息釋出到該程式碼指定...
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);
}
};
複製程式碼