Web Worker爲JavaScript開啓多線程

什麼是 Web Worker？

當在 HTML 頁面中執行腳本時，頁面的狀態是不可響應的，直到腳本已完成。

web worker 是運行在後臺的 JavaScript，獨立於其他腳本，不會影響頁面的性能。您可以繼續做任何願意做的事情：點擊、選取內容等等，而此時 web worker 在後臺運行。

 如何實現？

主線程上

const workerCaculate=(expression)=> {
    let result;
    if(typeof(Worker) !== "undefined") {
        let  w;
        if(typeof(w) == "undefined") {
//引入子線程文件，reac中的使用，引入的一定是相對根目錄的文件，因爲react執行的是打包後的文件，此時如果寫臨近目錄（非根目錄）的文件，會找不到文件引用的
           w = new Worker("/workflow/exceldesign/js/caculate_wev8.js");
        }
        //向子線程傳遞主線程的數據
        w.postMessage(expression);
        
        //接收子線程傳過來的數據並處理
        w.onmessage = function(event) {
            console.log(event.data)
            result= event.data;
            w.terminate();//清除子線程
        };
    } else {
        console.log("抱歉，你的瀏覽器不支持 Web Workers...");
        result = eval(expression)
    }
    return result;
}

子線程上/workflow/exceldesign/js/caculate_wev8.js文件裏

//子線程內容
onmessage= function(event){//event.data是主線程傳過來的數據
	let result=0;
    //子線程內對主線程的數據做一些處理
	let calculate =  new ___Calculate();
	result = calculate.calculateResult(event.data);

    //將處理後的數據傳給主線程
	postMessage(result);
}

 

reac中的使用，引入的一定是相對根目錄的文件，因爲react執行的是打包後的文件，此時如果寫臨近目錄（非根目錄）的文件，會找不到文件引用的