Javascript while loop makes the page not load

Question

When I put this in my header:

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

  };
</script>

Then in the body put

<script>
 checkiffinished();
 </script>

then the page crashes.

The code is supposed to count the number of divs with the "result-row" class and repeat that until the number of divs with aforementioned class is 3.

How can I make it so as such and not crash the page?

EDIT 1: other jQuery I have in the page causes there to be .result-row elements on another event, that's why I need it to check periodically.

EDIT2 : I'm trying to run this in parallel with some other jQuery that manipulates the elements on the page.

`n` never increases, are there any `.result-row` elements added at all? — pimvdb, Aug 08 '11 at 17:51
What do you mean by 'crash page'? Does the browser freeze? Why are re-assigning `n` with the same value within the loop? — Trevor, Aug 08 '11 at 17:52
other jquery i have in the page causes there to be .result-row elements on another event, that's why i need it to check periodically. — Josh, Aug 08 '11 at 17:52
You are not delaying the iterations of the while loop. Give the browser some room to breathe for heaven's sake `:)` (use a timer or something) — Šime Vidas, Aug 08 '11 at 17:53
I would create a custom jQuery event, then fire it in the OTHER code to instantiate a check, and do whatever is needed within that check (or exit back if not ready yet). — Mark Schultheiss, Aug 08 '11 at 18:37

score 10 · Accepted Answer · answered Aug 08 '11 at 17:53

10

JavaScript can only run one piece of code at a time. So your while loop is clogging up all JavaScript execution. As a result, any code that adds elements is suspended - basically forever.

Instead, you might want to use an interval which checks e.g. each second: 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

answered Aug 08 '11 at 17:53

pimvdb

151,816
78
307
352

That would work but if his function is wrong it would still freeze the page. – Will Evans Aug 08 '11 at 17:57
@Will Evans: His `while` loop was freezing the page. This code does not have any infinite loops. – pimvdb Aug 08 '11 at 17:58
the page loads but then freezes (by freezes i mean that none of the other jquery elements function) – Josh Aug 08 '11 at 17:59
1

@Josh: Does the fiddle also freeze? – pimvdb Aug 08 '11 at 18:00
@Josh: Maybe your jQuery is not correct. And don't use the term freeze if it is actually not freezing. – Felix Kling Aug 08 '11 at 18:00
So if he needs it to run in the background then surely he should use this: http://stackoverflow.com/questions/1160137/execute-background-task-in-javascript – Will Evans Aug 08 '11 at 18:02
@Felix Kling the jQuery is correct and functions perfectly if i take out the javascript i'm trying to fix currently – Josh Aug 08 '11 at 18:03
@Josh: Then maybe if you provide a jsfiddle demo we are able to help more. – Felix Kling Aug 08 '11 at 18:11
@Josh: primvdb's fiddle works perfectly fine for me (did you click the `add` button?)... which browser are you using? – Felix Kling Aug 08 '11 at 18:12

shawndumas · Answer 2 · 2011-08-08T18:16:44.893

Your problem is that n is not decremented.

pimvdb's Idea is a good one. Here is an implementation that includes a callback:

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

Use it like this:

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

How does this help here? Can you give an example? What is `All`? — Felix Kling, Aug 08 '11 at 17:59
Mmmh. Your code is supposed to iterate over an array and do something with each element. I don't see how this can be applied to checking periodically how many elements of a certain type exist. — Felix Kling, Aug 08 '11 at 18:08

jfriend00 · Answer 3 · 2011-08-08T18:31:45.287

Your code is an infinite loop if n !== 3 because nothing you do in the while loop ever changes the value of n so the while loop just runs forever waiting for the value of n to become 3. It is unclear why you put it in a while loop. It looks to me like it should just be an if instead of a while.

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

}
</script>

If you are going to use a while loop, then you have to have something that actually changes the value of n in the loop and code that ensures that you will reach the condition in your while loop to prevent the infinite loop.

As others have said, if you want to regularly check for the value of 3, then you need to repeatedly execute this function using setTimeout or setInterval not just loop infinitely. But, you don't want to execute it to often or you may drag down the performance of your site and other pages in the browser.

The best performing way to implement this would be just manually call checkiffinished() any time you've modified the page. That way, no browser cycles would be wasted regularly checking the page value when nothing has changed and the page would be updated immediately after the change (no waiting for the next timer to fire to check the page).

score 0 · Answer 4 · answered Aug 08 '11 at 17:52

0

Urmm, try making a button and see if it calls it and doesn't crash e.g <input type="button" value="Click me!" onclick="checkiffinished()" />

answered Aug 08 '11 at 17:52

Will Evans

227
2
10
20

when i click the button it freezes the page. – Josh Aug 08 '11 at 17:55
Oh try using an interval instead. – Will Evans Aug 08 '11 at 17:56

Javascript while loop makes the page not load

4 Answers4