HTML5 web workers 多线程

web worker 是运行在后台的 JavaScript,独立于其他脚本,不会影响页面的性能。

需在后台执行的js任务: webworkers.js

var i = 0;
function timeCount() {
    i = i+1;
    postMessage(i);  //重要 !  向 HTML页面传回数据
    setTimeout("timeCount()", 1000);
}

timeCount();

HTML 页

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <p>普通循环任务:<span id="timeout"></span></p>
    <p>多线程后台任务:<span id="workers"></span></p>
    <button onclick="c()">测试</button>
</body>

</html>

<script>
    function c() {
        alert('test');
    }

    //普通循环任务
    var t = 0;

    function time() {
        setTimeout(function() {
            t++;
            document.getElementById('timeout').innerHTML = t;
            time();
        }, 1000);
    }
    time();


    //多线程后台任务
    var w;

    function startWorker() {
        if (typeof(Worker) !== "undefined") {
            //是否为第一次启动该进程
            if (typeof(w) == "undefined") {
                //创建 web workers 对象
                w = new Worker("webworkers.js");
            }
            //接收并显示数据   event 为指定关键字
            w.onmessage = function(event) {
                document.getElementById("result").innerHTML = event.data;
            };
        } else {
            document.getElementById("result").innerHTML = "抱歉,你的浏览器不支持 Web Workers...";
        }
    }

    // 终止 workers 任务
    function stopWorker() {
        w.terminate();
        w = undefined;
    }
</script>
原文地址:https://www.cnblogs.com/lishalom/p/6952036.html