JavaScript：在div.container时执行某些操作<；窗高

我有一个函数

getRow（）

，它将一个元素放在

.container

中。当页面加载时，我希望有足够的元素来填充页面

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

$（文档）.ready（函数（）{
while（$（'.container'）.height（）<$（window.height（））{
getRow（）；
};
});

当我这样做时，浏览器冻结并崩溃。如果我将

while

替换为

If

，它会按预期放置一个元素（当然只是其中一个）

---

如何解决这个问题？

因为您正在使用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();
});

函数getRow（）{ $.ajax({ url:'您的url.php'， 成功：功能（响应）{ $（'.row:last'）。在（响应）之后； 检查高度（）； } }); } 函数checkHeight（）{ if（$（'.container'）.height（）<$（window.height（））{ getRow（）； } } $（文档）.ready（函数（）{ 检查高度（）； });

---

编辑：由于您是异步加载内容，因此在再次检查内容高度之前，必须等待内容加载并附加到DOM中。如果你在锁定自己之前执行a while（）循环，那么你的异步请求将永远无法完成，因为你已经冻结了你的浏览器。

getRow到底做了什么？@Andrew II它通过ajax获取一些东西，并执行

。after（）

将其放在

之后。row:last child

@user3733120:ajax？你意识到它（通常）是异步的吗？@AndrewII是的。这有问题吗？非常感谢。当我这样做时，它似乎将新元素放置了18次（超过了窗口大小）。它似乎也没有再次执行AJAX请求，因为18个元素完全相同（if调用将元素随机化）。你知道吗？啊，那是因为图像没有加载。我想我不得不以某种方式延迟它。@user3733120是的，它超出windows大小的原因是因为尚未加载图像。图像lodad也是异步的！AJAX调用应该在每个请求上返回相同的结果，因为第一个请求被缓存，然后浏览器加载缓存的响应。您可以尝试在URL的末尾添加一个唯一的参数，如“your.php”+new Date（）.getTime（）或类似的内容。