Trying to delay/pause/slow a while loop in jQuery

Question

I have looked around a lot, and not found the answer yet. Maybe it is simply something that cannot be done.

I am new to jQuery and JavaScript. Just to test the limitations I am trying to create a script that will continuously append a list item to an un-ordered list while a check box is not checked. I know I may not have my while statement correct in searching if the checkbox is checked or not, but the main issue I am having at the moment is the while loop starts running faster than the browser can keep up, locks up the page, and eventually I have to kill the browser. I have read many examples on setTimeout and setInterval, but what I continuously see is those only work with a for/next style loop, where the loop goes for a predetermined amount of cycles dependent upon a variable. I do not want this. I want the loop to continue until I check the box and then it should stop. So I am looking for a way to pause the loop or slow it down so 1) I can see each list item appended to the page, and 2) the script will give me a chance to end it by checking the box before it runs the browser to freeze/suicide.

Thanks in advance, code is below.

$(function(){
    $(document).ready(function() {loopLi();});
        var i = $('#jlist li').size();
        console.log(i);

        function loopLi() {
            while($('#Chckbox').not(":checked") ) {
                setInterval(function(){
                    i++;
                    $('<li>' + i + '</li>').appendTo('#jlist');
                }, 5000);
            }
        }
});

EDIT: Thank you all. Got it working. Did not realize that a while loop would run the code multiple times at the same time. This is all being learned for work, and the book we currently have does not go this in depth with stuff. Currently using jQuery: Novice to Ninja. Anything else we should look at to answer these kinds of questions, or is this just something that comes with working with it?

Answer 1

You're now creating an infinite amount of intervals - as long as the while loop is executed it creates a new one and the browser is therefore always busy and cannot respond to a checkbox click. Just one interval is enough.

Also, you ought to use ! .is() because .not returns a jQuery object, which is always truthy, i.e. passing the if/while.

http://jsfiddle.net/rUAKx/

var i = 0;

function loopLi() {
    setInterval(function() { // this code is executed every 500 milliseconds:

        if(!$('#Chckbox').is(":checked")) {
            i++;
            $('<li>' + i + '</li>').appendTo('#jlist');
        }

    }, 500);
}

$(loopLi);

Answer 2

I'm guessing you want to do something similar to this:

http://jsfiddle.net/PsXEa/5/

$(function(){
    i = $('#jlist li').size();
    console.log(i);

    function loopLi() {
        if ($('#Chckbox').not(":checked") ) {
            i++;
            $('<li>' + i + '</li>').appendTo('#jlist');
            setTimeout(loopLi,1000);
        }
    }
    loopLi();
});

Note that you've got a lot of similar solutions here. You should select one that either uses a setTimeout call explicitly in the loop, or that cleans up their setInterval timer with clearInterval.