9.2 Dedicated Worker
中譯：「專有 Worker」 或 「一般 Worker」。
範例
建立相關檔案及原始碼：
html5/worker/worker.html檔案。html5/worker/js_worker/worker.js檔案。
原始碼：
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="utf-8">
<title>Dedicated Worker(專有 Worker 或 稱做一般 Worker)</title>
</head>
<body>
<p>計數器：<span id="result"></span></p>
<button type="button" id="start_worker">啟動 Worker</button>
<button type="butotn" id="stop_worker">停止 Worker</button>
<script>
var worker;
var btn_start_worker = document.getElementById("start_worker");
var btn_stop_worker = document.getElementById("stop_worker");
btn_start_worker.addEventListener("click", function(){
console.log(worker);
if(window.Worker){
if(!worker){
// 建立一個 Dedicated Worker
worker = new Worker("./js_worker/worker.js");
// worker 監聽 message 事件，看是否有回傳資料，有的話就觸發 message 事件
worker.addEventListener("message", function(e){
document.getElementById("result").innerHTML = e.data;
});
}else{
alert("已啟用");
}
}else{
alert("瀏覽器不支援 Worker");
}
});
btn_stop_worker.addEventListener("click", function(){
if(worker){
worker.terminate(); // 停止 worker 的執行
worker = undefined;
}else{
alert("worker 未啟用");
}
});
</script>
</body>
</html>功能
按下 「啟動 Worker」 按鈕後，Worker 每隔一秒就回傳資料給頁面(主執行緒)。若要停止 Worker 的執行的話，可按下 「停止 Worker」 按鈕，就可以清除 Worker 的執行。
結果示意
在主執行緒中，建立 Dedicated Worker
var worker;
// 建立一個 Dedicated Worker
worker = new Worker("./js_worker/worker.js");在主執行緒中，監聽是否有資料從 Worker 中傳過來
資料可透過 e.data 取得：
// worker 監聽 message 事件，看是否有回傳資料，有的話就觸發 message 事件
worker.addEventListener("message", function(e){
document.getElementById("result").innerHTML = e.data;
});在主執行緒中，清除 Worker
// 停止 worker 的執行
worker.terminate();
// 將 worker 變數，設定成 undefined
worker = undefined;在 Worker 中，執行倒數計數的兩種寫法
在 worker 中，可使用 self 關鍵字，來代表 worker 本身。(也可省略不寫)。
寫法 1：
var i = 0;
function timesCount() {
i++;
self.postMessage(i);
setTimeout(function(){
timesCount();
}, 1000);
}
timesCount();寫法 2：
var i = 0;
function timesCount() {
i++;
self.postMessage(i);
}
timesCount();
setInterval(function(){
timesCount();
}, 1000);Last updated