javascript flush文本

Question

我試圖更改h3標記中的文本，但只有在函數結束之後纔會發生更改。我想立即更改文字。

例如：

<h3 id="myText"></h3> 
<input type="button" onClick="changeText('Hello');"> 

<script type="text/javascript"> 
    function changeText(str){ 
     document.getElementById('myText').innerHTML = str; 
    } 
</script> 

是否可以立即刷新屏幕更改文本後？ （與C中的flush()命令一樣）。

需要注意的是，如果我把一個alert的命令後，文本被立即改變：

function changeText(str){ 
    document.getElementById('myText').innerHTML = str; 
    alert('HelloWorld'); 
} 

Answer 1

強制立即刷新，你可以這樣做：

document.getElementById('myText').innerHTML = str; // change the dom 
setTimeout(function(){ 
    // do other things 
}, 0); 

的do other things代碼將刷新後執行。

但是，讓腳本繼續運行幾秒鐘是非常不尋常的。

Answer 2

如果您正在討論刷新所有頁面，您將丟失客戶端更改的內容，因爲它是無狀態的（在請求之間）。如果你將它保存在服務器端的存儲庫（會話，應用程序，你可以讀寫的文件，數據庫等），你可以從服務器端讀取並保存在你的html元素中。

在Javascript中你可以實現一個字典（元素ID上鍵和innerHTML的價值），並把它作爲一個高速緩存和實施沖洗方法來顯示所有的變化，你可以試試：

<script> 

var cacheChanges = {}; 

function addChange(element, value){ 
    cacheChanges[element] = value; 
} 

function flush() { 
    for(var i in cacheChanges) 
    { 
    var element = document.getElementById(i); 
    if (element) { 
     element.innerHTML = cacheChanges[i]; 
    } 
    } 
} 


function ChangeSomething(){ 
    // do some changes 
    addChange('myText', 'Hello'); 
    addChange('myText2', 'Hello 2'); 
    addChange('myText3', 'Hello 3'); 

    // apply all them 
    flush(); 
} 

</script> 

，並在您的html：

<h3 id="myText"></h3> 
    <h3 id="myText2"></h3> 
    <h3 id="myText3"></h3> 

    <input type="button" onClick="ChangeSomething();">