本文介绍了作为同步行为的JavaScript Async/AWait逻辑的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

如果我理解正确的话,使用关键字async声明的函数应该返回承诺。在async3函数的情况下,我们有10亿次迭代,这使得返回值花费的时间稍长一些。分析下面的代码,我预计会发生的情况是,通过调用sync1sync2函数,立即登录控制台,稍后将出现async3函数日志。但是,我注意到的是,sync1sync2函数仅在async3结束后登录。async3函数不应该运行在另一个线程上或事件循环外部,而不会阻止在运行时调用的其他函数的执行吗?

数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">
function sync1() {
  console.log(1);
}

function sync2() {
  console.log(2);
}

async function async3() {
  let iteration = 0;
  let number = 0;
  while (iteration <= 1000000000) {
    number = iteration;
    iteration++;
  }
  return number;
}

sync1();
sync2();
async3().then((val) => console.log(val));

你能澄清它为什么会这样做吗?我错过了什么?

我所期望的:

sync1(); // console logged immediately
sync2(); // console logged immediately
async3().then((val) => console.log(val)); // console logged moments later

当前情况:


     sync1(); // console logged after async3 is done 
     sync2(); // console logged after async3 is done
     async3().then((val) => console.log(val)); // console logged after async3 is done

推荐答案

记住,基本上是单线程的。

虽然async3是异步的,但它的操作是完全同步的,并且占用大量的CPU。只有当浏览器有一点空闲时间时,输出才会(可视地)打印到控制台,但以下块:

  while (iteration <= 1000000000) {
    number = iteration;
    iteration++;
  }

在上述计算完成之前,浏览器没有空闲时间。

对于sync1sync2要立即记录,一种解决方案是让async3每100,000次(或更多)暂停一次,并等待setTimeout,从而使浏览器有机会执行诸如向控制台显示内容、处理其他事件侦听器、呈现更改等操作。

另一种解决方案是在工作器中执行计算繁重的async3函数,该函数位于单独的线程上,不会阻塞浏览器的主线程。

这篇关于作为同步行为的JavaScript Async/AWait逻辑的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

09-16 08:27