JavaScript:在 div.container < window.height 时做一些事情

Question

我有一个函数 getRow()，它将一个元素放入 .container 中。当页面加载时，我希望有足够的元素来填充页面。

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

当我这样做时，浏览器会卡住并崩溃。如果我将 while 替换为 if，它会按预期放置一个元素(但当然只是一个元素)。

我该如何解决这个问题？

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() 循环之前将自己锁定在无限循环中，并且您的异步请求将永远不会完成，因为您已经卡住了浏览器。