jQuery loop and append crashing the browser

Question

So basically, I am attempting to display a Bootstrap Modal once a specific image is clicked. I am then attempting to display some text and image within a paragraph tag that will be changed every 600 milliseconds like so:

Playing -> Playing. -> Playing.. -> Playing...

Once the text becomes 'Playing...', it will return back to the start as 'Playing', and over and over again until the Modal's display class becomes none.

I am calling all this after a setTimeOut function since I need to wait for the Bootstrap Modal to load first to test against its class.

Although, my code is crashing the browser every time, and due to that, I cannot view the developer tools to find out the problem.

$(".tutorial").click(function () {
    $('#tutorialModal').modal('show');
    $(this).toggleClass('playingGif'); //display 'playing' background image
    $(this).toggleClass('tutorial'); //turn off regular background image

    setTimeout(function () {
        while ($('#tutorialModal').css('display') == 'block') {
            var text = 'Playing';

            $('p', this)
            .delay(600)
            .queue(function (n) {
                $(this).html(text);
                n();
            });

            if (text == 'Playing...') {
                text = 'Playing';
            } else {
                text += '.';
            }
        }
    }, 500);
});

@DamonSmith - Crashes in both Chrome and Firefox. Haven't tested in any others yet. — Fizzix, Mar 13 '14 at 06:16
the reason why it's crashing is probably because it's in a busy loop, constantly queueing up functions to run, you probably think that because that delay is there, the while loop will take 600 millis per step but no. — Damon Smith, Mar 13 '14 at 06:16
`while ($('#tutorialModal').css('display') == 'block')` this is the culprit. — Ram, Mar 13 '14 at 06:16
[Have you checked other questions?](http://stackoverflow.com/questions/4639716/dot-dotdot-dotdotdot-as-loading-in-js) — Ram, Mar 13 '14 at 06:20
@undefined - You stated that it was the while loop that was the culprit, not the appending? — Fizzix, Mar 13 '14 at 06:27
Actually both of them, while the condition is true you are appending and appending and ... — Ram, Mar 13 '14 at 06:29

score 1 · Accepted Answer · answered Mar 13 '14 at 06:23

try something like this:

var text = 'Playing';
function startPlaying() {

  if($('#tutorialModal').css('display') == 'block') {


    $('p', this).html(text);
    n();

    if (text == 'Playing...') {
      text = 'Playing';
    } else {
      text += '.';
    }
    window.setTimeout(startPlaying, 500);
  }
}
startPlaying();

that way, it runs every 500 millis, it updates the playing... text and then if it's still displayed it will queue up another run of the function in another 500 millis. I didn't try out this code, it's just to give you a general idea.

Changed `startPlaying()` to `window.setTimeout(startPlaying, 500);` and removed `n();` and it worked like a charm. Thanks! — Fizzix, Mar 13 '14 at 06:31

jQuery loop and append crashing the browser

1 Answers1