javascript - 我如何知道对 jquery html() 的更改何时完成？

Question

我正在使用 jQuery 更改标记的 HTML，新的 HTML 可以是很长的字符串。

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

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

我想知道的是，当对 html() 的更改完成呈现时，是否会触发事件或以其他方式收到通知？我遇到了 jQuery watch 插件，它作为解决方法工作正常，但并不理想。有没有更好的办法 ？

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 中使用时间为 1 的 setTimeout(...) 会延迟执行，直到调用函数中的当前 JavaScript 代码完成并且浏览器更新了用户界面。这可能会解决您的问题，但很难判断，除非您可以提供可重现的错误示例。