zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    awk
    tac
    cat
    less
    more
    head
    vim
    linux安装redis
    Redis for Python开发手册
    Python3.x标准模块库目录
  • 原文地址:https://www.cnblogs.com/lishalom/p/6952036.html
Copyright © 2011-2022 走看看