Web Worker 实战解析-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_42863883/article/details/103826739

webWorker学习

简单理解worker的作用就是一个处理复杂大量数据的js函数，
如下图，在index.html代码中，1、先对Worker进行实例化创建work，创建work.onmessage对事件监听，通过work.postMessage方法传递参数param，work.js创建message事件监听，通过message监听事件获得参数param，在work.js进行数据处理，完成后，通过postMessage方法传递结果数据，index.js的通过onmessage事件监听获得返回的数据。

注：worker要通过服务器才能进行使用

在这里插入图片描述

代码

index.html
<!DOCTYPE html>
<html>
<body>
    <input type="text" id="input">
    <button onclick="count()">计算</button>
    <button onclick="result()">结果</button>
</body>
<script type="text/javascript">
    //创建线程 work对象
    var work = new Worker("work.js");
    // 监听消息
    work.onmessage = function (event) {
        console.log('输出的结果是:' + event.data);
    };
    // 计算
    function count() {
        let num = document.getElementById('input').value
        //发送消息
        work.postMessage(document.getElementById('input').value || 0);
    }
    // 关闭worker
    function result() {
        work.terminate()
        work = null
    }
</script>
</html>

work.js
addEventListener('message', function (event) {
    var num = event.data;
    var result = 0;
    for (var i = 1; i <= num; i++) {
        result += i;
    }
    postMessage(result);
}, false);
// 下面这写法也可以
onmessage = function (event) {
    var num = event.data;
    var result = 0;
    for (var i = 1; i <= num; i++) {
        result += i;
    }
    postMessage(result);
}

参考文档：
http://www.ruanyifeng.com/blog/2018/07/web-worker.html
https://github.com/GoogleChromeLabs/ui-element-samples/blob/gh-pages/web-workers/worker.js