立即在Javascript中更新DOM元素

對於一個簡單的項目，我試圖在textarea中顯示日誌輸出。我有一個log函數，並且希望textarea在調用log時總是立即更新。不幸的是，它似乎只執行一次更新，並且同時推送所有內容（如果可能很重要，我使用JQuery來設置textarea的值）。這裏有一個簡單的例子：立即在Javascript中更新DOM元素

for (i = 0; i <= 100; i++) { 
    $("textarea").html($("textarea").html() + "test" + i + "\n"); 
    $("textarea").scrollTop(9999999) 
};

這一次吐出來的所有文本到文本區域（注意：你可以看到這些例子在這個jsfiddle的結果）。這個簡單的例子很容易通過創建一個超時，並使用遞歸函數調用補救：

f = function(i) { 
    if (i <= 100) { 
     $("textarea").html($("textarea").html() + "test" + i + "\n"); 
     $("textarea").scrollTop(999999); 
     setTimeout(function() { f(i+1); }, 0); 
    } 
}; 

f(1);

這個版本吐出來的是文成一次textarea的一個線，這是我想要的。但以這種方式使用超時和回調在記錄設置中似乎並不實際;每次我打電話給log時，我都必須提供一個回調函數，以便我要遵循日誌調用。

有什麼方法可以在沒有回調的情況下達到預期的效果嗎？

來源

2011-04-24 rubergly

那麼，你的第一個片段是如此之快，它似乎它一次添加文本... – 2011-04-24 20:46:42

你究竟想完成什麼？計算機速度越快，無論如何可以觀察到的影響越小。我不明白爲什麼你會喜歡所有額外的重繪。 – pimvdb 2011-04-24 20:48:48

夥計們，我認爲他希望能夠「看到」所有逐個發出的消息（因此他可以看到發生了什麼），因爲他必須緩衝記錄的消息並打印期刊..看到我的回答 – dwarfy 2011-04-24 21:08:34

我想你可能會考慮使用：的

$("textarea").val(function(index, value) { 
    return value + "test" + i + "\n" 
});

代替：

$("textarea").html($("textarea").html() + "test" + i + "\n");

或一般：

$("textarea").val(NEWVAL)

在你的問題的評論也指出，如果你想能夠「注視」所有到達的信息你必須將它們保存在緩衝區，有這樣的事情（未測試）：

var buffer = [] 

function log(text) { buffer.push(text) } 

setInterval(function(){ 
    if (len(buffer)>0) { 
    $("textarea").val(function(index, value) { 
     return value + "\n" + buffer.shift() 
    }); 
    } 
},500)

來源

2011-04-24 20:52:47 dwarfy

一般的瀏覽器（Opera是一個例外）做JS執行和呈現在同一個線程，所以你的JS運行時除非您通過超時或間隔定時器明確控制權限，否則不會由第browser個瀏覽器完成渲染。

來源

2011-04-25 03:11:19

立即在Javascript中更新DOM元素

回答

相關問題