前端之H5新特性Web Worker

MDN

使用步骤

1.检测浏览器是否支持worker

if (window.Worker) {
    
    
	// ...
}

2.写一个Worker要运行的JS文件（包含回传函数 —— 事件处理函数）
worker.js处理页面传来的信息, 并将结果传回去

onmessage = function(e) {
    
    
  console.log('Message received from main script');
  var workerResult = 'Result: ' + (e.data[0] * e.data[1]);
  console.log('Posting message back to main script');
  postMessage(workerResult);
}

3.用构造函数生成一个Worker

var myWorker = new Worker('worker.js');
// worker.js 要放在服务器上

4.向worker发送消息

first.onchange = function() {
    
    
  myWorker.postMessage([first.value,second.value]);
  console.log('Message posted to worker');
}

second.onchange = function() {
    
    
  myWorker.postMessage([first.value,second.value]);
  console.log('Message posted to worker');
}

5.接收 Worker 传来的消息

myWorker.onmessage = function(e) {
    
    
  result.textContent = e.data;
  console.log('Message received from worker');
}

6.终止 worker
方法一：
HTML页面

myWorker.terminate();

方法二
线程中自己关闭

close