javascript在函數中重畫頁面？

我有一個JavaScript函數從xmlhttprequest函數中加載100個div。我喜歡它，以便瀏覽器顯示它們逐個加載，這樣用戶就可以看到進度。但是，使用下面的函數，我什麼都看不到，直到一切都加載。如何讓瀏覽器在每個子div連接後重新繪製頁面？javascript在函數中重畫頁面？

window.onLoad = function() 
    { 
    var i; 
    for (i=1;i<=100;i++) 
    { 
     var newdiv = document.createElement('div'); 
     newdiv.innerHTML = httpget('getitem.pl?component=' + i); 
     var maindiv = document.getElementById('maindiv'); 
     maindiv.appendChild(newdiv); 
     document.getElementById('progressdiv').innerHTML = 'Progress: ' + i + ' of 100'; 
     } 
    document.getElementById('progressdiv').innerHTML = 'Loaded.'; 
    }

來源

2012-01-08 Myforwik

post httpget function – noob 2012-01-08 23:46:53

您使用哪種瀏覽器？你可以做一個jsfiddle的例子嗎？ – hamczu 2012-01-08 23:46:59

那個'httpget'函數是什麼？ – 2012-01-08 23:47:30

你不能在一個函數內完成它。您需要讓瀏覽器呼吸，通常使用setTimeout(fn, 0)。

window.onload = function() { 
    var i = 1; 
    function loop() { 

    // loop body 

    if (++i <= 100) { 
     setTimeout(loop, 0); 
    } else { 
     // loop done 
    } 
    } 
    loop(); 
}

Javascript和瀏覽器的UI運行在同一個線程;只要你繼續執行JS，UI將不會更新。 setTimeout會在隊列中推出新的「作業」，然後loop函數將退出。這結束了當前的「工作」。隊列中的下一個將是UI中的任何更改;當完成後，下一個loop「工作」將開始。

來源

2012-01-08 23:46:20 Amadan

謝謝，我設置了加載第一個div的超時時間，並在該超時設置了下一個div的超時時間，依此類推直到它們全部加載完畢。 – Myforwik 2012-01-09 00:00:30

@Myforwik：確實如此。 – Amadan 2012-01-09 00:01:22

你確定Javascript和瀏覽器的UI在同一個線程中運行嗎？在更新UI之前，瀏覽器更容易等待腳本完成執行，因爲在完成所有修改之前沒有必要更新它。 – RobG 2012-01-09 00:18:54

javascript在函數中重畫頁面？

回答

相關問題