WEB Worker多线程创建

最新推荐文章于 2024-06-05 23:28:49 发布

Tone@

最新推荐文章于 2024-06-05 23:28:49 发布

阅读量840

点赞数 1

分类专栏： javascript 文章标签：前端 servlet javascript

本文链接：https://blog.csdn.net/TongJ_/article/details/126073010

版权

javascript 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

js是单线程，通过web worker 可以模拟多线程，单线程处理比较安全，
但是是如果处理时间过长，就会处于无响应的状态，所以可以用多线程来进行解决
使用步骤：
1、创建web worker对象
var w = new Worker("js文件")
2、发送数据
w.postMessage("参数")
3、接受数据
w.onMessage = function(value){
//value 是接收的参数
}
4、错误处理
w.onerror = function(error){
//error 是错误信息
}
5、结束进程
w.close();
实例：为斐波那契数列创建多线程，不影响主线程执行。

html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        <p>输入:<input type="text" id="invalue"></p>
        <p>输出:<input type="text" id="outvalue"></p>
        <p><input type="button" value="计算" onclick="fun()">
            <input type="button" value="测试" onclick="test()">
        </p>
    </div>
    <script>
        function test() {
            alert("没有阻塞!");
        }
        function fun(){
            //创建多线程对象
            var w = new Worker("test.js");
            var v = document.getElementById("invalue").value;
            //发送数据
            w.postMessage(v);
            //接收函数
            w.onmessage = function(val){
                document.getElementById("outvalue").value = val.data;
                console.log(val);
            }
        }
    </script>
</body>
</html>

js文件

function fibonaqie(num){
    if(num <= 2){
        return 1;
    }
    else{
       return fibonaqie(num - 1) + fibonaqie(num - 2);
    }
}
onmessage = function(value){
    var n = fibonaqie(value.data);
    this.postMessage(n);
}