Javascript while循环使页面无法加载

时间:2011-08-08 17:49:33

标签: javascript jquery html loops while-loop

当我把它放在我的标题中时:

<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>

然后页面崩溃。

代码应该用“result-row”类计算div的数量,并重复这个,直到上述类的div数为3。

我怎样才能这样做而不会崩溃页面?

编辑1:我在页面中的其他jQuery导致在另一个事件上有.result-row元素,这就是我需要定期检查的原因。

EDIT2:我正在尝试与其他一些操纵页面元素的jQuery并行运行。

5 个答案:

答案 0 :(得分:10)

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

答案 1 :(得分:2)

你的问题是n没有减少。

pimvdb的想法很好。这是一个包含回调的实现:

 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
)();

答案 2 :(得分:1)

如果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循环中达到条件的代码,以防止无限循环。 / p>

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

实现此功能的最佳方式是在您修改页面时手动调用checkiffinished()。这样,当没有任何改变时,不会浪费任何浏览器周期来定期检查页面值,并且在更改后立即更新页面(不等待下一个计时器触发以检查页面)。

答案 3 :(得分:0)

Urmm,尝试制作一个按钮,看看它是否会调用它并且不会崩溃,例如<input type="button" value="Click me!" onclick="checkiffinished()" />

答案 4 :(得分:0)

如果他需要它来检查后台,我假设他确实这对Josh有帮助,Execute Background Task In Javascript