web worker 是运行在后台的 js,独立于其他脚本,不会影响页面的性能。 并且通过 postMessage 将结果回传到主线程
<input type="text" id="first">
<input type="text" id="second">
main.js代码
1.创建worker对象
var myWorker = new Worker('./js/worker.js');
let first = document.getElementById('first')
let second = document.getElementById('second')
2.获取first,second元素并监听元素变化
first.onchange = function () {
myWorker.postMessage([first.value, second.value]);
};
second.onchange = function () {
myWorker.postMessage([first.value, second.value]);
};
4.响应 worker 回传的消息
myWorker.onmessage = function(e) {
var workerResult = 'Result: ' + (e.data[0] * e.data[1]);
postMessage(workerResult);
}
3.在js.worker中用来接收postMessage发过来的消息,并响应
onmessage = function(e) {
var workerResult = (e.data[0] * e.data[1]);
postMessage(workerResult);
}