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

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

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

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

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

作为一个已经提到的评论者,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中使用时间为1 setTimeout(...)延迟执行,直到调用函数中的当前JavaScript代码完成并且浏览器更新了UI。 这可能会解决您的问题,但除非您能提供可重现的错误示例,否则很难说明问题。

这是7年后的事情,我刚刚遇到了一个完全像@mikel描述的场景,我无法避免“基于计时器的解决方案”。 所以,我只是分享我开发的解决方案,以防任何人在那里仍有问题。

我讨厌在我的代码中使用setTimeoutsetInterval 。 所以,我创建了一个小插件,你可以把它放在你认为最好的地方。 我使用了setInterval ,但您可以将其更改为setTimeout或您想到的其他解决方案。 这个想法只是创建一个承诺并继续检查元素。 一旦准备好,我们就会解决这个承诺。

 // jquery.ensure.js $.ensure = function (selector) { var promise = $.Deferred(); var interval = setInterval(function () { if ($(selector)[0]) { clearInterval(interval); promise.resolve(); } }, 1); return promise; }; // my-app.js function runWhenMyElementExists () { // run the code that depends on #my-element } $.ensure('#my-element') .then(runWhenMyElementExists);