javascript - 如何让元素的 innerHTML 立即更新？

Question

我有一个带有文本框的网页。当在.js框中输入文件名并单击“执行”按钮时，给定的文件将通过 AJAX 和eval()'d.

此页面上还有一个空<div>的用作输出。如果加载的文件需要在屏幕上打印一些内容，它会将其添加到div.innerHTML

向其添加文本时，innerHTML,它通常不会在 Javascript 完成之前呈现在屏幕上，这很好，但有时 Javascript 文件会执行繁重的计算，可能需要一分钟才能完成，而且能够在执行时看到输出会很有用。

有没有办法“刷新”文档？

Answer 1

我会尝试使用setTimeout.

function performInitialHtmlRender() {
    /// This sets the innerHtml that you want the user to see
    /// While you are performing the calculations
}

function performExpensiveCalculationsAndRender() {
    // This is the really expensive function that
    // you want to run once the browser has rendered 
    // the initial HTML
}

performInitialHtmlRender();
setTimeout(performExpensiveCalculationsAndRender(), 0);

Answer 2

您可以使用 setTimeout：

div.innerHTML = html;
setTimeout( function(){
   doHeavyCalculations();
}, 35);

http://jsfiddle.net/YKEKK/