002_web worker 使用初步

 

 

index.html

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>HTML5</title>
</head>
<body>
    hello index.html!
</body>
<!-- <script src="./js/func.js" ></script> -->
<script>
    //执行此 html 必须在  http://127.0.0.1:8080 的方式下进行执行。

    // 1. new Worker() 加载脚本
    let worker = new Worker("http://127.0.0.1:8080/js/func.js");

    // 2. postMessage() 主线程传给worker的数据
    // worker.postMessage("this is a message from worker.postMessage");
    // worker.postMessage({method:'echo', args:['Work']});

    worker.postMessage({cmd:'start', msg:"MSG"});

    // 3. onmessage() 主线程监听子线程返回的消息
    worker.onmessage =  function(event){
        console.log("Received: " + event.data);
        doSomething();
    }

    function doSomething() {
        // 执行任务...
        worker.postMessage(" worker done ");

        // 4. 执行完毕 关闭 worker 线程
        worker.terminate();
    }

</script>
</html>

 

func.js  ( web worker )

// Worker 线程内部的监听函数
// self代表子线程自身，即子线程的全局对象

// self.addEventListener('message', function(e){
//     self.postMessage("you said" + e.data);
// },false);

self.addEventListener('message', function(e){
    let data = e.data;
    switch( data.cmd ){
        case 'start':
            self.postMessage("WorkerStarted "+ data.msg);
            break;
        case 'stop':
            self.postMessage("Worker Stopped "+ data.msg);
            break;
        default:
            self.postMessage("Unknown command: "+ data.msg);
    };
}, false);

 

posted @ 2019-02-18 21:25  aocn  阅读(72)  评论(0)    收藏  举报