Как предотвратить параллельное выполнение JavaScript-кода при редактировании документа?

Question

Я хочу редактировать страницу только с помощью js (без фреймворков), поэтому я создаю несколько функций, каждая из которых что-то редактирует. Тем временем я хочу скрыть страницу, поэтому временно заменяю тело каким-то пустым кодом, вызываю функции для редактирования страницы и затем возвращаю исходное тело. Моя проблема в том, что результаты функций отображаются одновременно, поэтому страница никогда не бывает «скрытой».

Вот основная функция, которую я вызываю, чтобы сделать все.

async function blocker() {
    hide(); //replace body 

    ... //some edit

    sleep(5000); //assume I have a function to delay the editing
    unhide(); //put back the original body
}

Это функция скрытия

var html;

function hide(){
    html = document.body;
    tempBody = document.createElement('body');
    tempBody.innerText = "LOADING";
    tempBody.style = `...`;
    document.body = tempBody;
}

Я ожидаю увидеть текст «ЗАГРУЗКА» сразу после того, как я вызову blocker(), вместо этого он ожидает завершения всех операций и отображает изменения только после завершения unhide(). Не могли бы вы помочь мне?

Answer 1

будет работать, без асинхронности, жду

function blocker() {

    hide(); //replace body 

    //some edit

    setTimeOut(function(){

      unhide(); //put back the original body after 5s

    }, 5000);

}