我如何知道對 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 代碼完成並且瀏覽器更新了 UI 之后。 這可能會解決您的問題，但很難判斷，除非您可以提供可重現的錯誤示例。

Answer 2

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 3

使用 .ready jQuery 函數

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