js Worker 使用方法

最新推荐文章于 2024-05-29 09:33:19 发布

webzenghao

最新推荐文章于 2024-05-29 09:33:19 发布

阅读量2.1k

点赞数

文章标签： javascript 前端开发语言 vue react.js

本文链接：https://blog.csdn.net/weixin_44680009/article/details/127268270

版权

JS采用的是单线程机制，所有的任务只能在一个线程上完成，前面的任务没有完成就只能等待。随着计算机计算能力的增强，多核处理器的出现，单线程已不能充分的发挥计算机的算力，WebWorker就是给主线程创建多线程的环境，实现主线程运行时，WebWorker线程在后台运行，两者互不干扰，待WebWorker线程任务完成后，将结果返回给主线程。

JS主线程和Worker线程的相同点和不同点

在这里插入图片描述
功能展示
假设主线程有三个任务需要执行 1000万次 3个任务就是3000万次，js都是单线程的，如果放在一个js里面执行必然会导致后面代码卡顿。

开启Worker 加载执行js解决问题

主线程代码 index.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
</head>
<button onclick="click_w()">点击</button>
<body>

    <script>
        //假设这里有三个任务 每一个任务要执行2千次数
        let list = ["第一个任务", "第二个任务", "第三个任务"];
        //记录线程回来的数据
        let rw_is = [];
        function click_w() {
            console.log("点击开始执行函数", new Date().getSeconds());
            for (let item in list) {
                //执行第一个任务
                let worker1 = new Worker('demo_workers.js');
                //循环执行添加子任务
                worker1.postMessage(list[item]);
                worker1.onmessage = function (e) {
                    rw_is.push(e.data);
                    worker1.terminate(); // 终止通信
                };
            }
            //添加监听线程处理结果
            let set_t = setInterval(() => {
                if (rw_is.length >= 1) {
                    console.log("执行结果", rw_is);
                    console.log("执行这个后的秒数", new Date().getSeconds());
                    //如果线程结果一致清掉定时器
                    clearInterval(set_t);
                }
                console.log("定时器监听")
            }, 100);
            console.log(1)
            console.log('我做了操作')
        }
    </script>

</body>

</html>

// workers.js

// 等同于 this.addEventListener / addEventListener
this.addEventListener('message', function (e) {
    let cuont=0;
    for (let i = 0; i <10000000000; i++) {
        cuont=cuont+1;
    }
    this.postMessage(e.data+'执行完毕'+cuont+"次数");
    this.close();
}, false)
// 监听错误
this.addEventListener('error', function (e) {
    console.error(e);
}, false);