Как получить цикл for для асинхронного запуска?

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 к значению value.Это точно не займет много времени.И в цикле нет никаких обещаний, поэтому он все еще блокируется.

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 становятся доступными без блокировки страницы.

Отредактировано -> (опечатка) в => функция стрелки.