web worker 更耗費 CPU 資源的任務
阿新 • • 發佈：2018-05-10
start function nbsp javascrip cti row 一個 true fun
web worker的小例子，用來入門很合適，建議啟動服務來開發。可以使用node的anywhere。
<!DOCTYPE html>
<html>
<body>
<p>計數:
<output id="result"></output>
</p>
<button onclick="startWorker()">開始 Worker</button>
<button onclick="stopWorker()">停止 Worker</button>
<br />
<br />
<script>
var w;
function startWorker() {
if (typeof (Worker) !== "undefined") {
if (typeof (w) == "undefined") {
w = new Worker("/demo_worker.js");
}
w.onmessage = function (event) {
document.getElementById("result").innerHTML = event.data;
};
}
else {
document.getElementById("result").innerHTML = "Sorry, your browser does not support Web Workers...";
}
}
function stopWorker() {
w.terminate();
}
</script>
</body>
</html>
當 web worker 傳遞消息時，會執行事件監聽器中的代碼。event.data 中存有來自 event.data 的數據。
然後我們就可以從 web worker 發生和接收消息了，向 web worker 添加一個 "onmessage" 事件監聽器。
/demo_worker.js
var i=0;
function timedCount()
{
i=i+1;
postMessage(i);
setTimeout("timedCount()",500);
}
timedCount();
以上代碼中重要的部分是 postMessage() 方法 - 它用於向 HTML 頁面傳回一段消息
web worker 更耗費 CPU 資源的任務