JavaScript - Web Worker - 多執行緒

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檔案直接跑,會出錯。(這是滿特別的地方)