JS 里如何实现异步？

Posted 2023-05-26 Regina_wisdom

由于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来调试。

JS 异步回调

Js 异步回调

回调概念：回调是一个函数被作为一个参数传递到另一个函数里，在那个函数执行完后再执行。
有点绕，好，咱们说大白话。就是B函数被作为参数传递到A函数里，在A函数执行完后再执行B。

 

下面咱们看看代码怎么实现回调。

function A(callback){

    console.log("I am A");

    callback();  //调用该函数

}

 

function B(){

   console.log("I am B");

}

 

A(B);

 

异步回调

因为js是单线程的，但是有很多情况的执行步骤（ajax请求远程数据，IO等）是非常耗时的，如果一直单线程的堵塞下去会导致程序的等待时间过长页面失去响应，影响用户体验了。

如何去解决这个问题呢，我们可以这么想。耗时的我们都扔给异步去做，做好了再通知下我们做完了，我们拿到数据继续往下走。

var xhr = new XMLHttpRequest();

    xhr.open(‘POST‘, url, true);   //第三个参数决定是否采用异步的方式

    xhr.send(data);

    xhr.onreadystatechange = function(){

        if(xhr.readystate === 4 && xhr.status === 200){

                ///xxxx

        }

    }

上面是一个代码，浏览器在发起一个ajax请求，会单开一个线程去发起http请求，这样的话就能把这个耗时的过程单独去自己跑了，在这个线程的请求过程中，readystate 的值会有个变化的过程，每一次变化就触发一次onreadystatechange 函数，进行判断是否正确拿到返回结果。

 

来自: https://segmentfault.com/a/1190000007227305