GUI更新和程序流延迟

Question

txtA为HTML文本区域。

Javascript:

addTxtA = str =>  document.getElementById("txtA").value+=str+"n";

function delay(sec){
let start = now = Date.now();
while((now - start) < (sec * 1000))  now = Date.now();
}      
window.onload = function() {
for (let i = 0; i<5; i++ )  addTxtA(i);   
delay(2);
for (let i = 5; i<10; i++ ) addTxtA(i); 
}  

程序开始延迟，然后打印1-2-3-4-5-6-7-8-9。

如果我将addTxtA()更改为console.log()，它将按我预期的1-2-3-4(延迟)5-6-7-8-9打印。

我希望程序打印到GUI的延迟在4到5之间。

我该怎么做?

Answer 1

延迟确实发生在您期望它发生的地方，但是在所有同步代码执行完成之前，浏览器无法呈现任何内容。

您需要重构代码以异步执行，例如:

const delayAsync = function( sec ){
return new Promise( resolve => {
setTimeout( () => { resolve(); }, sec * 1000 );
})
}
const runAsync = async function(){
for (let i = 0; i<5; i++ )  addTxtA(i);
await delayAsync(2);
for (let i = 5; i<10; i++ ) addTxtA(i);
}
window.onload = function() {
runAsync();
}