JavaScript实现多线程——Web Worker【源代码】

桃扇骨 2022-06-01 04:41 111阅读 0赞

原理网上都应该有介绍，这里我就不介绍了。  
直接上代码。代码分为3个文件，一个HTML文件，两个JS文件。  
html文件：

<html>
    
    <head>
    </head>
    
    <body>
        <button type="button" id="btn">Click Me!</button>
        <script type="text/javascript" src="test1.js"></script>
        <script type="text/javascript" src="test2.js"></script>
    </body>
    
    </html>

test1.js文件：

var worker = new Worker('test2.js');
    var i = 50;
    var ele = document.getElementById('btn');
    
    //添加按钮的点击事件
    ele.addEventListener('click', function () { 
        //将i值传给test2.js
        worker.postMessage(i);
        //接收test2.js传过来的值
        worker.onmessage = function (e) { 
            alert(e.data)
        }
    }, false)

test2.js文件：

//接收test1.js传过来的值
    onmessage = function (e) {
        var data = e.data;
        var result = 0;
        for (i = 0; i < data; i++) { result += i; }
        postMessage(data);
    }

运行之后点击按钮，会弹出如图所示：  
![这里写图片描述][SouthEast]

这说明多线程运行成功，并且相互传递数据成功。

[SouthEast]: /images/20220601/41fe02fca2c04535b0c72044b28ef873.png

发表评论取消回复

表情：

评论列表（有 0 条评论，111人围观）

还没有评论，来说两句吧...

相关阅读

相关浏览器多线程——web worker

一、引入 Web Worker 的原因 > JavaScript 语言采用的是单线程模型，也就是说，所有任务只能在一个线程上完成，一次只能做一件事。前面的任务没做完，

- 日理万妓/ 2022年12月17日 11:53/ 0 赞/ 118 阅读

相关 JavaScript 后台处理（Web Worker）

webWorker.html <html> <head> <style> body { width: 100%; } ta

野性酷女/ 2022年07月12日 02:59/ 0 赞/ 90 阅读

相关多线程——worker-master模式

该模式通过将任务拆分，多个worker线程共同处理任务，最终返回结果给master，由master组装最终结果。一、master

落日映苍穹つ/ 2022年06月09日 02:12/ 0 赞/ 140 阅读

相关【JavaScript】H5多线程的实现 — Web Worker

什么是Web Worker 　　将JavaScript代码交给Web Worker在后台执行时，页面就可以在JavaScript运行期间依然可以响应用户操作，以防止出现页

拼搏现实的明天。/ 2022年06月05日 04:56/ 0 赞/ 131 阅读

相关 JavaScript实现多线程——Web Worker【源代码】

原理网上都应该有介绍，这里我就不介绍了。直接上代码。代码分为3个文件，一个HTML文件，两个JS文件。 html文件： <html> <h

桃扇骨/ 2022年06月01日 04:41/ 0 赞/ 112 阅读

相关与Web Worker线程交换数据应用

一应用该应用允许用户输入两个数，两个数确定一个范围，而程序代码则计算、收集这个范围的所有质数。二代码 1、HTML代码 <!DOCTYPE htm

逃离我推掉我的手/ 2022年05月12日 00:48/ 0 赞/ 128 阅读

相关嵌套Worker线程应用

一应用 1、前台JS脚本先启动一个Worker线程，该Worker线程负责收集该范围内的所有质数。 2、程序把收集到的所有质数再次提交给另外一个Worker线程统计出指定

缺乏、安全感/ 2022年05月12日 00:48/ 0 赞/ 106 阅读

相关使用Web Worker创建多线程应用

一介绍 HTML5 Web Workers web worker是运行在后台的JavaScript，不会影响页面的性能。什么是 Web Worker 当在HTML页

淩亂°似流年/ 2022年05月12日 00:48/ 0 赞/ 150 阅读

相关高性能JavaScript之 Web Workers

大多数浏览器让一个单线程共用于执行 JavaScript 和更新用户界面。每个时刻只能执行其中一种操作，这意味着当 JavaScript 代码正在执行时页面无法响应输入，反之亦

痛定思痛。/ 2021年12月20日 11:41/ 0 赞/ 249 阅读

相关 Html5之web workers多线程

Web Workers 是 HTML5 提供的一个javascript多线程解决方案，我们可以将一些大计算量的代码交由web Worker运行而不冻结用户界面。 1、首先看一

Dear 丶/ 2021年06月24日 14:34/ 0 赞/ 286 阅读