JavaScript：在div.container <window.height時執行某些操作

Question

我有一個功能getRow() ，將元素放置在.container 。 頁面加載時，我希望有足夠的元素來填充頁面。

$(document).ready(function() {
    while($('.container').height() < $(window).height()) {
            getRow();
    };
});

當我這樣做時，瀏覽器凍結並崩潰。 如果我用if代替while ，它將按預期放置一個元素（當然只是一個）。

我怎樣才能解決這個問題？

Answer 1

由於您正在使用AJAX加載內容，並且正如zerkms所指出的那樣，它是異步的，因此您應該在AJAX請求完成后檢查容器的高度。 就像是：

function getRow() {
  $.ajax({
    url: 'your-url.php',
    success: function(response) {
      $('.row:last').after(response);
      checkHeight();
    }
  });
}

function checkHeight() {
  if ($('.container').height() < $(window).height()) {
    getRow();
  }
}

$(document).ready(function() {
  checkHeight();
});

編輯：由於要異步加載內容，因此必須再次等待內容加載並附加到DOM上，然后才能再次檢查內容高度。 如果執行一個while（）循環，然后再將其鎖定並進行無窮循環，則異步請求將永遠不會完成，因為您已經凍結了瀏覽器。