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

Question

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

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

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

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

Answer 1

7 年后，我刚刚遇到了一种与 @mikel 描述的场景一模一样的情况，我无法避免“基于计时器的解决方案”。因此，我只是分享我开发的解决方案，以防有人仍然遇到问题。

我讨厌在我的代码中使用 setTimeout 和 setInterval 。因此，我创建了一个小插件，您可以将其放在您认为最好的位置。我使用了 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);

Answer 2

正如评论者已经提到的，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);

使用 setTimeout(...)1 的 > 会推迟执行，直到调用函数中的当前 JavaScript 代码完成并且浏览器更新了 UI 后。这可能会解决您的问题，但很难判断，除非您可以提供您所遇到的错误的可重现示例。

Answer 3

使用 .ready jQuery 函数

$("#divToChange").html(newHTML).ready(function () {
                    // run when page is rendered
                    });