首页
随笔记录

分类

当前位置: 云海天教程网 > 技术新闻 > 随笔记录 >正文

JS 里如何实现异步?

更新时间:2023-05-26  作者:佚名   来源: 网络转载

由于JS是单线程程操作,所以遇到了一些比较耗时的操作时,会影响到主线程的效率,比如在扫描二维码应用中,解析QR code的过程中会造成页面相机流的卡顿。所以将耗时的解析过程放到子线程中就不会影响到主线程。
使用web worker 可以实现这个功能。

1. 子线程

在子线程 web_worker.js中使用onmessage 来接收主进程post的参数。解析成功后再将结果post到主线程。

self.onmessage = function(message){
  const imgData = message.data;
  const code = jsQR(imgData.data, imgData.width, imgData.height);
  if (code) {
    self.postMessage(code);
  }
};

2. 主线程

主线程的文件中需要先引入 这个web_worker.js文件

worker = new Worker("your/path/to/web_worker.js");

a. 在需要解析的时候post 参数到子线程进行解析。

 worker.postMessage(imageData);

b. 同时使用onmessage 来接收子线程post的结果。

worker.onmessage = e => {
  console.log(e.data);
};

c. 不需要的时候要中止掉web worker.

worker.terminate();

worker.terminate() 是用在worker 的外部,就是可以在主线程中使用的。
worker.close 也可以终止worker, 但是要用在worker内部。

web worker 中不能使用dom, global 需要改写成self, 可以使用console.log来调试。

上一篇:补一下这几天收获 下一篇:you-get 批量下载bilibili视频(播放列表)
小编推荐
快速导航更多>>
JavaScript 教程 HTML5 教程 CSS3 教程 jQuery 教程 Vue.js 教程 Node.js 教程 SQL 教程 C 教程 PHP 教程 Linux 教程 Docker 教程 Nginx 教程 Python 教程 Java 教程

云海天教程网 版权所有

 陕公网安备 61050202000585号

陕ICP备14013131号-3