Javascript 'console' infinite loop

Question

I'm experimenting with javascript programs and I hit a snag. The program suddenly lags my browser (infinite loop maybe), dunno why.

function fullscreen() {
    if (document.body.requestFullScreen) {document.body.requestFullScreen();}
    else if (document.body.webkitRequestFullScreen) {document.body.webkitRequestFullScreen();}
    else if (document.body.mozRequestFullScreen) {document.body.mozRequestFullScreen();}
}

var bash = document.createElement('span');
bash.setAttribute('id', 'bash');
document.body.appendChild(bash);

var cursor = document.createElement('span');
cursor.setAttribute('id', 'bashCursor');
cursor.textContent = '_';
cursor.style.display = 'none';
cursor.style.fontWeight = 'bold';
document.body.appendChild(cursor);

window.Bash = {};
window.Bash.printing = false;
window.Bash.queue = Array();
window.Bash.span = bash;
window.Bash.span.cursor = cursor;

delete bash; delete bash;


function bashPrint() {
    window.Bash.writing = true;
    var bash = window.Bash.span
    var i;
    while (window.Bash.queue.length) {
        if (window.Bash.queue[0] == undefined) {
            i = 0;
            while (i < window.Bash.queue.length) {
                window.Bash.queue[i] = window.Bash.queue[i+1];
                console.log('l:'+window.Bash.queue.length);
                console.log(window.Bash.queue);
                delete window.Bash.queue[i+1];
                window.Bash.queue.splice(i,1);
                i++;
            }

        } else if (window.Bash.queue[0]['type'] == 'instant') {
            bash.textContent += window.Bash.queue[0]['value'];
            delete window.Bash.queue[0];
            window.Bash.queue.splice(0,1);

        } else if (window.Bash.queue[0]['type'] == 'wait') {
            setTimeout(bashPrintWaiting, window.Bash.queue[0]['wait']);
            break;

        } else if (window.Bash.queue[0]['type'] == 'cursor') {
            if (window.Bash.queue[0]['value']) {
                window.Bash.span.cursor.style.display = 'inline';
            } else {
                window.Bash.span.cursor.style.display = 'none';
            }
        }
    }
    window.Bash.writing = false;
}

function bashPrintWaiting() {
    window.Bash.writing = true;
    var bash = window.Bash.span;
    bash.textContent += window.Bash.queue[0]['value'];
    delete window.Bash.queue[0];
    window.Bash.queue.splice(0,1);
    window.Bash.writing = false;
    setTimeout(bashPrint, 0);
}

function bashWrite(string) {
    var array = Array();
    array['type'] = 'instant';
    array['value'] = string;
    window.Bash.queue[window.Bash.queue.length] = array
}

function bashPause(times, string) {
    if (!string) {string='';}
    while (times > 0) {
        var array = Array();
        array['type'] = 'wait';
        array['value'] = string;
        array['wait'] = 50 + Math.floor(Math.random()*450);
        window.Bash.queue[window.Bash.queue.length] = array;
        times--;
    }
}

function bashCursor(enabled) {
    var array = Array();
    array['type'] = 'cursor';
    array['value'] = enabled;
    window.Bash.queue[window.Bash.queue.length] = array;
}

bashWrite('Uncompressing');
bashPause(12, '.');
bashWrite('OK\n');

bashPause(3);
bashWrite('Build v. 0.1.01-release (x86_64-pc)\n');

bashPause(2);
bashWrite('Connecting');
bashPause(35, '.');
bashWrite('Error, unknown user. See connect.log for futher information.\n');

bashPause(2);
bashWrite('none@m ~ $ >>');
bashCursor(true);

bashPrint();

I uploaded it on jsFiddle - http://jsfiddle.net/uQcCP/

Program freezes between:

bashWrite('Error, unknown user. See connect.log for futher information.\n');

and

bashPause(2);

Please, can you help me? Thanks a lot.

Always post the relevant code **in the question itself**, don't just link. http://meta.stackexchange.com/questions/118392/add-stack-overfow-faq-entry-or-similar-for-putting-code-in-the-question — T.J. Crowder, Dec 15 '12 at 20:10
Could you please make it so that the code will not start running, or paste the code someplace else like pastebin? It's a bit hard to debug something that freezes the browser. — JJJ, Dec 15 '12 at 20:11

Ian Hunter · Accepted Answer · 2012-12-15T20:26:11.720

4

The infinite loop starts on line 51: while (window.Bash.queue.length) {

It then ends up in the if statement on line 74, and within this the queue is never shortened:

else if (window.Bash.queue[0]['type'] == 'cursor') {
   if (window.Bash.queue[0]['value']) {
      window.Bash.span.cursor.style.display = 'inline';

If you find yourself having infinite loop problems in Chrome, open up your development tools and go to the script tab before you open up the page. After you open up the page and it starts looping, you can click the pause button to throw a breakpoint wherever the code is currently executing. From there it's a lot easier to divine where you're getting your error.

edited Dec 15 '12 at 20:26

answered Dec 15 '12 at 20:14

Ian Hunter

9,466
12
61
77

@m93a You're welcome! I added some information on how I debugged it if you're interested. – Ian Hunter Dec 15 '12 at 20:26
Did not know about the pause button. Excellent, addition! – qooplmao Dec 15 '12 at 20:35

Javascript 'console' infinite loop

1 Answers1