webworker在js与vue中的使用

var worker1 = new Worker('worker1.js');
worker1.postMessage('Hello World1');
worker1.onmessage = function (event) {
    console.log('Received worker1 message ' + event.data);
}

var worker2 = new Worker('worker2.js');
worker2.postMessage('Hello World2');
worker2.onmessage = function (event) {
    console.log('Received worker2 message ' + event.data);
}

 

worker1.js

 

onmessage = function (event) {

    console.log("worker1 onmessage");

    test();

}



function test() {

    for (var i = 0; i < 20; i++) {

        console.log("worker1:" + i);

        postMessage("worker1:" + i);

    }

}

 

 

worker2.js

onmessage = function (event) {

    console.log("worker2 onmessage");

    test();

}



function test() {

    for (var i = 0; i < 20; i++) {

        console.log("worker2:" + i);

        postMessage("worker2:" + i);

    }

}

 

 

 

worker.js在vue中的使用

import railWayWorker from "../../scripts/railway.worker.js";

let worker = new railWayWorker();
worker.name = "worker" + name;
worker.postMessage("主线程发送数据给子线程");
worker.onmessage = function (e) {

    console.log("接收到worker子线程返回的数据");

};

 

子线程

railway.worker.js

onmessage = function (event) {
    console.log("接收到主线程发来的消息");
    let para = event.data;
    init(para);
}

 

init:function(){

     postMessage("发送消息给主线程");

}

 

Vue 使用worker需要vue-worker插件

vue-worker