JavaScript - Web Worker - 多執行緒
由於前端，開始變得用來處理大量的UI處理(產生物件，或同時多種UI變動）
由於有些資料超過了一千、一萬的資料繪製，而又需要有一些處理其它事物，導致原本JavaScript的單執行緒會影響到畫面的呈現。
終於前端也走到了這一步，需要開始多執行緒，
查網路的多執行緒解，
大概是用這個 Web Worker，應該是HTML5之後的範疇，
https://www.w3schools.com/html/html5_webworkers.asp
而他IE方面的支援是IE 10之後才支援喔。
Worker是瀏覽器JavaScript內建的類別，
而實際很像Android 的 Handler。只有在onmessage的Callback後，才能操作畫面上的UI
而Worker初始化，需要載入一個js檔，將要處理的複製動作在那個js檔裡面做，在這個js檔裡，不可操作外部的DOM物件。(所以很像Android背景執行時，不可操作UI)
而我寫了一個倒數30秒的程式，來實作這個多執行緒（或稱非同步）的程式。
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<span class="time"></span>
<span id="result"></span>
<script>
var w;
function startWorker() {
console.log('startWorker2');
if(typeof(Worker) !== "undefined") {
if(typeof(w) == "undefined") {
w = new Worker("work.js");
}
w.onmessage = function(event) {
console.log(event.data);
//document.getElementById("result").innerHTML = event.data;
$('.time').html(event.data);
};
} else {
console.log('No Web Worker');
document.getElementById("result").innerHTML = "Sorry! No Web Worker support.";
}
}
function stopWorker() {
w.terminate();
w = undefined;
}
$(document).ready(function(){
console.log('startWorker');
startWorker();
});
</script>
</body>
</html>
而work.js內容如下
var i = 30;
function timedCount() {
i = i - 1;
postMessage(i);
if(>0) {
setTimeout("timedCount()",1000);
}
}
timedCount();
這是一個小實驗，但他必須用Web Server瀏覽的方式，來執行，不可直接點html檔案直接跑，會出錯。(這是滿特別的地方）