1 回答

TA貢獻(xiàn)1880條經(jīng)驗(yàn) 獲得超4個(gè)贊
您的瀏覽器僅在完成運(yùn)行循環(huán)的任務(wù)后才會(huì)執(zhí)行渲染步驟while
。因此,只有在while 循環(huán)完全完成所有迭代后才會(huì)顯示結(jié)果。相反,您可以setTimeout()
每毫秒對(duì)多個(gè)單獨(dú)的任務(wù)進(jìn)行排隊(duì)1000
,這將更新您的瀏覽器 UI。每次任務(wù)運(yùn)行時(shí),您的瀏覽器都可以重新運(yùn)行渲染步驟以顯示所做的更改。
請(qǐng)參閱下面的示例:
var pushups = 0;
var pushupGoal = 5;
function doExercise() {
? document.getElementById("pushup1").innerHTML = ++pushups + ' pushups';
? if (pushups < pushupGoal) {
? ? setTimeout(doExercise, 1000);
? } else {
? ? document.getElementById("pushup1").innerHTML = pushups + ' pushups. You reached your goal!';
? }
}
<link rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container justify-content-center">
? <h1>Pushups</h1>
? <h4 id="pushup1">0 pushups</h4>
? <button class="btn btn-primary" onclick="doExercise()">Start</button>
</div>
添加回答
舉報(bào)