立即用Javascript更新DOM元素

Question

對於一個簡單的項目，我正在嘗試在文本區域中顯示日志輸出。 我有一個log功能，並且希望textarea總是在每次調用log立即更新。 不幸的是，它似乎只執行一次更新，並同時推送所有內容（如果可能的話，我正在使用JQuery設置textarea的值）。 這是一個基本示例：

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

這會將所有文本立即吐出到textarea中（注意：您可以在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);

這個版本一次將文本吐出到文本區域中，這正是我想要的。 但是以這種方式使用超時和回調在日志記錄設置中似乎不切實際。 每次調用log ，我都必須為要在log調用之后使用的所有功能提供回調。

有沒有辦法在沒有回調的情況下達到預期的效果？

Answer 1

我認為您可以考慮使用：

$("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)

Answer 2

瀏覽器通常（Opera是一個例外）在同一線程上執行JS執行和渲染，因此，當您的JS運行時，瀏覽器將不會進行渲染，除非您通過超時或間隔計時器明確地屈服於控制。