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>

тогда страница вылетает.

Код должен подсчитывать количество делений с классом «result-row» и повторять это до тех пор, пока число делений с вышеупомянутым классом не станет 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 хороша.Вот реализация, которая включает в себя обратный вызов:

 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

Ваш код представляет собой бесконечный цикл, если 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

Если ему нужна проверка в фоновом режиме, я предполагаю, что он это делает, тогда наверняка это поможет Джошу, Выполнить фоновую задачу в Javascript

Answer 5

Урмм, попробуйте сделать кнопку и посмотреть, не вызывает ли она ее, например, <input type="button" value="Click me!" onclick="checkiffinished()" />