JavaScript之Worker子线程importScriptspostMessageaddEventListeneronmessageselfonclick

Posted 2022-03-22 web半晨

目录

• 1、主文件
• • 1.1、html部分
  • 1.2、JavaScript部分
• 2、创建子线程文件workerA.js
• 3、创建需要引入的外部worker.importScripts.js文件
• 4、注意
• 5、相关链接

---

1、主文件

1.1、html部分

<button id="clickMe">点我</button>

页面需要引入./index.js文件。

---

1.2、javascript部分

// 创建子线程
// Date.now()是为了每次打包获取最新的子线程文件
window.$worker = new Worker('./workerA.js?time=' + Date.now());

// 通过点击事件触发子线程
clickMe.onclick = () => 
    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使用教——阮一峰