JavaScript - Браузер немедленного пересчета и переименования

Question

Возможно ли заставить браузер выполнить немедленное оплавление & перерисовать из JavaScript, даже если есть еще один код?

Я показываю индикатор выполнения, все на основе асинхронных событий, поэтому, когда что-то загружается с сервера или из кеша, обновления DOM, Документ DOM.

Я пробовал все эти трюки с отображением/видимостью нет/скрыто, getComputedStyle, requestAnimationFrame, но ничего не заставляет браузер делать реальную перерисовку. Вероятно, он сбрасывает очередь и применяет все изменения, но никакой реальной перерисовки на экран не происходит.

Answer 1

JavaScript работает в однопоточной среде исполнения. Таким образом, нет, вы не можете остановить исполняемый контекст выполнения и сделать что-то еще.

Возьмите этот фрагмент кода, например ... Будет ли обновление текста абзаца до появления предупреждения?

function foo(){ 
 
    
 
    // Note that this timer function is set to run after a zero millisecond delay 
 
    // which effectively means immediately. But, it won't do that because it must 
 
    // first finish executing the current function. So, the timer function will be 
 
    // placed in the event queue and will run as soon as the JS engine is idle. But, 
 
    // we can't know exactly when that will be, we can only ask to run the code after 
 
    // a "minimum" delay time. 
 
    setTimeout(function(){ 
 
    document.querySelector("p").textContent = "I've been updated by JS!"; 
 
    }, 0); 
 
    
 
    // The alert will run before the setTimeout function because the alert is part of the 
 
    // current execution context. No other execution context can run simultaneously with this one. 
 
    alert("While you are looking at me, check to see if the paragraph's text has changed yet."); 
 
} 
 

 
document.querySelector("button").addEventListener("click", function(){ 
 
    foo(); 
 
});

<button>Click Me</button> 
 
<p>Some content that can be updated by JS</p>

Answer 2

Таким образом, в конце концов, SetTimeout (resolvePromise (...), 0) помогли. Это дает браузеру небольшое количество времени для перерисовки.