Question

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

我在用户控件上有一个空的div部分，如下所示：

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

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

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

它工作正常，但生成“somegeneratedhtml”需要太长时间，我想在之前div内容设置为这个生成的html，像“loading please wait ...”这样的文本显示在同一个div中。所以我使用相同的代码设置html之前设置div与“somegeneratedhtml”像这样

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上的附件链接列表，但“loading please wait ...”从未显示。

我希望直到html在bindattachment上生成“loading please wait ...”短语在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，也就是说，它不会锁定UI因为在正常的JS线程下运行的JS会。

Answer 2

在jQuery中你必须使用

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

将您的文字添加到带有附件列表的div中。

好的，你已经纠正过了：）

Answer 3

我很惊讶，加载需要很长时间，但我猜测正在发生的事情正在加载请等待在jQuery("attachmentlist").html(somegeneratedhtml);中快速替换。我要做的是在附件列表中创建两个div。有一个包含加载消息，另一个包含生成的html。使用.hide()和.show()选择显示的内容。

Answer 4

我使用您的代码创建了jsfiddle。我添加了一个简单的$(document).ready()函数来运行该函数。

$(document).ready(function() {
   bindattachment(); 
});

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

div显示正确的'somegeneratedhtml'。

查看生成'somegeneratedhtml'的内容会很有帮助。该错误可能发生在该函数中。

Answer 5

它所花费的时间不是改变div中的html，而是渲染你的html。

一次性更改div内容两次

5 个答案: