HTML 5 Web Workers

最新推荐文章于 2024-04-19 13:44:44 发布

aeipyuan

最新推荐文章于 2024-04-19 13:44:44 发布

阅读量141

点赞数

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

本文链接：https://blog.csdn.net/weixin_42060896/article/details/105057197

版权

前端专栏收录该内容

35 篇文章 0 订阅

订阅专栏

什么是 Web Worker？

当在 HTML 页面中执行脚本时，页面的状态是不可响应的，直到脚本已完成。

web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行。

/*--------------worker.js---------------*/

//计算斐波那契
function fibonacci(num){
    if(!num)   return 0;
    return num==1?1:fibonacci(num-1)+fibonacci(num-2);
}
var onmessage=function(e){
    var number=e.data;
    console.log('分线程接收到主线程数据：'+number);
    //计算结果
    var res=fibonacci(number);
    //返回数据
    postMessage(res);
    console.log('分线程返回数据到主线程：'+res);
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>workers多线程</title>
</head>
<body>
    <input type="number" id="input">
    <button id="btn">计算斐波那契项</button>
    <script>
        var input=document.getElementById('input');
        var btn=document.getElementById('btn');

        //绑定点击事件
        btn.onclick=function(){
            var number=input.value;
            //创建Worker对象
            var worker=new Worker('worker.js');
            //向分线程发数据
            worker.postMessage(number);
            console.log('向分线程发数据：'+number);
            //绑定监听函数
            worker.onmessage=function(e){
                console.log('主线程接收分线程返回数据：'+event.data);
                console.log(e);
            }
        }
    </script>
</body>
</html>

aeipyuan

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML 5 Web Workers

什么是 Web Worker？当在 HTML 页面中执行脚本时，页面的状态是不可响应的，直到脚本已完成。web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行。/*--------------worker.js---------------*//...
复制链接

扫一扫