javascript - 一次更改 div 内容两次

Question

嗨，这是我关于 stackoverflow 的第一个问题，我希望它能帮助我解决我的问题。

我在这样的用户控件上有一个空的 div 部分:

<div id="attachmentlist"></div>

此 div 的内容将加载到名为 bindattachment() 的 javascript 函数中在这个函数中，我使用了一些 jquery 函数来设置 html 并将其设置为像这样的 div 内容

jQuery("#attachmentlist").html(somegeneratedhtml);

它工作正常，但生成“somegeneratedhtml”需要太长时间，我希望在 div 内容设置为这个生成的 html 之前，在同一个 div 中显示类似“加载中请稍候...”的文本。所以我在使用“somegeneratedhtml”设置div之前使用相同的代码设置html

jQuery("#attachmentlist").html('<p>loading please wait ...');

所以 bindattachment() 看起来像这样

function bindattachment()
{
   jQuery("#attachmentlist").html('<p>loading please wait ...</p>');
   var html;
   html = "somegeneratedhtml";
   jQuery("#attachmentlist").html(html);
}

我得到的是 div 上的附件链接列表，但“正在加载请稍候...”从未显示。

我希望直到 html 在 bindattachment 上生成“加载中请稍候......”短语显示在 div 中

Answer 1

在 JS 执行上下文中，UI 通常仅在 JS 完成后更新。因此，调用

jQuery("#attachmentlist").html('<p>Loading, please wait ...</p>');
// long loop here
jQuery("#attachmentlist").html('<p>Finished</p>');

意味着对 DOM 的第一次更新(调用 .html)将被忽略，因为 UI 线程在 JS 完成之前永远不会运行。您可以在 JS 中执行一些操作来触发布局，但这并不意味着 UI 会实际更新。

如果您想确保显示第一条消息，您应该更新它，然后运行您的代码以异步生成 HTML。 For example ,

var div = $('#attachmentlist');
// This will never display because the HTML is overwritten before the UI thread
// runs
div.html('<p>First call to set html, will not display');
// This will display because there are no other synchronous calls to update the same
// DOM elemements
div.html("second call to set html, this displays");
// The function passed to setTimeout runs after the UI has had a chance to update
setTimeout(function() {
    // Long running script
    var html = "";
    for (var i=0; i < 100000; i ++) {
        html+= "testing...<br/>";
    }
    // By updating the HTML with a timeout, the previous call to $.html
    // will be visible on the screen for a minimum amount of time
    div.html(html);
}, 1);

关于长时间运行脚本的注意事项

请注意，如果用 JS 生成 HTML 需要很长时间，它可能会锁定浏览器，您应该使用 Web Workers异步生成 HTML，也就是说，它不会像在普通 JS 线程下运行的 JS 那样锁定 UI。