Web Worker简介

2018-10-09  本文已影响0人  花泽冒菜

JavaScript采用的是单线程模型,Web Worker的作用就是为JavaScript创造多线程环境。在主线程以外,创建Worker线程在后台运行,不影响主线程,常用来处理一些计算密集型或高延迟的任务。
Worker线程一旦创建成功就会持续运行,就不会被主线程的活动打断。

下面介绍Worker最基本的使用方法,想要了解详细内容,请参见阮一峰老师的日志:
http://www.ruanyifeng.com/blog/2018/07/web-worker.html

主线程
  1. 新建
var worker = new Worker('worker.js');
  1. 发送数据
worker.postMessage(someData);  // someData可以是任何类型的数据
  1. 接收数据
worker.onmessage = function (event) {
  console.log('Received message: ' + event.data);  // 事件对象的data属性访问发来的数据
}
  1. 关闭Worker线程
worker.terminate();
Worker线程
  1. 接收数据
self.onmessage =  function (e) {
  console.log('Received message: ' + event.data);  // 事件对象的data属性访问发来的数据
}
  1. 发送消息
self.postMessage(someData);  // someData可以是任何类型的数据
  1. 关闭Worker线程
self.close();

常用写法示例:

self.addEventListener('message', function (e) {
  var data = e.data;
  switch (data.cmd) {
    case 'start':
      self.postMessage('WORKER STARTED: ' + data.msg);
      break;
    case 'stop':
      self.postMessage('WORKER STOPPED: ' + data.msg);
      self.close(); // Terminates the worker.
      break;
    default:
      self.postMessage('Unknown command: ' + data.msg);
  };
}, false);
上一篇 下一篇

猜你喜欢

热点阅读