Question

我正在与世界各地的一代一起做游戏，我想在屏幕上显示一代的进展。即使在异步函数内部使用了for循环，它也会停止该函数外部的所有其他代码来运行循环。

我尝试了一个forEach循环，该循环具有相同的问题，并且性能较差。

async function genWorld(){
  setupWorld();
}

async function setupWorld(){
  let size = worldSize.width * worldSize.height;
  let up = size/100;
  let check = 0;
    for(i = 0; i < worldSize.width; i++){
        for(z = 0; z < worldSize.height; z++){
            check++;
            if(check == up){
                console.log("test");
                check = 0;
                worldGenProgress.full++;
            }
        }
    }
}

我希望进度条可以用for循环以图形方式内联更新，而不是在完成后跳到100％。

Answer 1

for循环将check的值累加到值的大小。那并不是完全需要一段时间。而且循环中没有任何承诺，因此它仍然处于阻塞状态。

function mandelaEffect() {
    return new Promise( (MyThen, MyCatch) => {
        setTimeout(MyThen);
        return "Things on the page may have changed? Or maybe not?";
    })
}

async function setupWorld(){
  let size = worldSize.width * worldSize.height;
  let up = size/100;
  let check = 0;
    for(i = 0; i < worldSize.width; i++){
        for(z = 0; z < worldSize.height; z++){
            check++;
            await mandelaEffect(100); // this could be 1 just to allow browser events.
            if(check == up){
                console.log("test");
                check = 0;
                worldGenProgress.full++;
            }
        }
    }
}

魔术在循环内的等待中发生。在等待过程中，一个异步函数将等待（浏览器事件未解除阻止），并且等待等待者的承诺得到答复后，将在等待时恢复。

因此while和for循环变得可用而不会阻塞页面。

已编辑->（典型）为=>箭头功能。

您如何获得for循环来异步运行？

1 个答案: