如何判断jquery html()的更改何时完成？

Question

我正在使用jQuery来更改标记的HTML,而新的HTML可能是一个非常长的字符串.

$("#divToChange").html(newHTML);

然后我想选择在新HTML中创建的元素,但是如果我将代码紧跟在上面的行之后,它似乎创建了一个带有长字符串的竞争条件,其中html()所做的更改可能不一定完成渲染.在这种情况下,尝试选择新元素并不总是有效.

我想知道的是,当html()的更改完成渲染时,是否有事件被触发或者其他一些方式被通知？我遇到了jQuery手表插件,它可以正常工作,但它并不理想.有没有更好的办法 ？

Answer 1

作为一个已经提到的评论者,JavaScript是单线程的,因此你无法获得竞争条件.

然而,令你沮丧的是,在线程完成之前,UI不会基于JavaScript自行更新.这意味着html(...)在浏览器呈现内容之前,整个方法必须完成,包括调用后的所有代码.

如果调用后的代码html(...)依赖于在继续之前重新计算的页面布局,则可以执行以下操作:

$("#divToChange").html(newHTML);
setTimeout(function() {
    // Insert code to be executed AFTER
    // the page renders the markup
    // added using html(...) here
}, 1);

使用JavaScript中setTimeout(...)的时间1推迟执行,直到调用函数中的当前JavaScript代码完成并且浏览器更新了UI.这可能会解决您的问题,但除非您能提供可重现的错误示例,否则很难说明问题.