webWorker学习

朱雀 2023-06-27 05:48 2阅读 0赞

##### 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要通过服务器才能进行使用

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjg2Mzg4Mw_size_16_color_FFFFFF_t_70]

代码

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjg2Mzg4Mw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200103205125625.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjg2Mzg4Mw==,size_16,color_FFFFFF,t_70