JavaScript之Worker、子线程、importScripts、postMessage、addEventListener、onmessage、self、onclick

1、主文件 1.1、html部分

<button id="clickMe">点我 console.log('第一次开启子线程'); window.$worker.postMessage({ status: 0, }); }; // 接收子线程返还的数据 window.$worker.onmessage = function ({ data }) { let { status } = data; if (status === 1) { console.log('第一次子线程执行结束，并返回数据：', data); console.log('第二次开启子线程，线程轮巡'); window.$worker.postMessage({ status: 1 }); } if (status === null) { console.log('第二次子线程执行结束，并返回数据：', data); console.log('数据处理结束，线程结束轮巡'); } }; 

2、创建子线程文件workerA.js

// 通过importScripts引入.js文件 importScripts('./worker.importScripts.js?time=' + Date.now()); self.addEventListener('message', function ({ data }) { data.obj = obj; data.tests = tests; let { status } = data; if (status === 0) { // 在这里可以处理需要的逻辑程序 // 此处可以引进外部的.js文件 // 例如上传 data.frequency = 1; // 把处理好的数据返回给主程序 // 子线程没有渲染功能 self.postMessage({ ...data, status: 1 }); } else if (status === 1) { // 在这里可以处理需要的逻辑程序 // 此处可以引进外部的.js文件 // 例如下载 data.frequency = 2; // 把处理好的数据返回给主程序 // 子线程没有渲染功能 self.postMessage({ ...data, status: null }); } }, false); 

3、创建需要引入的外部worker.importScripts.js文件

let obj = { fileName: 'worker.importScripts', size: '24k' }, tests = '测试'; 

4、注意

importScripts导入.js文件函数必须在子线程中使用，不能在主线程中单独使用。

5、相关链接

Web Worker使用教——阮一峰