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.

Answer 1

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.