Javascript while循环使页面无法加载

Question

当我将其放入标题中时：

<script>
function checkiffinished() {
  var n = $('.result-row').length;
  while (n!==3)
  {
  n = $('.result-row').length;
  $("span").text("There are " + n + " divs.");
  };

  };
</script>

然后放入正文中，

<script>
 checkiffinished();
 </script>

然后页面崩溃。

该代码应该计算“结果行”类的 div 数量，并重复该操作，直到上述类的 div 数量为 3。

我怎样才能做到这一点而不会使页面崩溃？

编辑1：页面中的其他 jQuery 导致另一个事件上有 .result-row 元素，这就是为什么我需要它定期检查。

EDIT2：我试图与其他一些操作页面上元素的 jQuery 并行运行它。

Answer 1

JavaScript 一次只能运行一段代码。所以你的 while 循环阻塞了所有 JavaScript 执行。因此，任何添加元素的代码都会被挂起——基本上永远挂起。

相反，您可能想要使用每秒检查一次的间隔： http://jsfiddle.net/pimvdb /sbs6m/1/。

function checkiffinished() {
  var n = $('.result-row').length;
  $("span").text("There are " + n + " divs.");
  if(n === 3) {
    // do something
    clearInterval(interval);
  }
};

var interval = setInterval(checkiffinished, 1000); // 1000 ms = 1 second

Answer 2

你的问题是 n 没有减少。

pimvdb 的 Idea 是个好主意。这是一个包含回调的实现：

 var waitUntil = function (fn, condition, interval) {
    interval = interval || 100;

    var shell = function () {
            var timer = setInterval(
                function () {
                    var check;

                    try { check = !!(condition()); } catch (e) { check = false; }

                    if (check) {
                        clearInterval(timer);
                        delete timer;
                        fn();
                    }
                },
                interval
            );
        };

    return shell;
};

像这样使用它：

waitUntil(
  function () {
    // the code you want to run here...
  },
  function() {
    // the code that tests here... (return true if test passes; false otherwise)
  },
  0 // amout to wait between checks
)();

Answer 3

你的代码是一个无限循环 if n !== 3 因为你在 while 循环中所做的任何事情都不会改变 n 的值，所以 while 循环只是永远运行，等待n 的值变为 3。目前还不清楚为什么将其放入 while 循环中。在我看来，它应该只是一个 if 而不是 while。

<script>
function checkiffinished() {
  var n = $('.result-row').length;
  if (n!==3)
  {
    $("span").text("There are " + n + " divs.");
  };

}
</script>

如果您要使用 while 循环，那么您必须有一些能够实际更改循环中 n 值的东西，以及确保您将达到 while 循环中的条件以防止无限循环的代码。

正如其他人所说，如果您想定期检查 3 的值，那么您需要使用 setTimeout 或 setInterval 重复执行此函数，而不仅仅是无限循环。但是，您不想经常执行它，否则可能会降低您的网站和浏览器中其他页面的性能。

实现此目的的最佳执行方法是在修改页面时手动调用 checkiffinished() 。这样，当没有任何更改时，就不会浪费浏览器周期来定期检查页面值，并且页面将在更改后立即更新（无需等待下一个计时器触发来检查页面）。

Answer 4

呃，尝试制作一个按钮，看看它是否调用它并且不会崩溃，例如