Stack overflow while processing large array in recursive function

Question

Why does the following recursive code cause a stack overflow if the array list is too large? How can I fix this and still retain the recursive pattern?

var list = readHugeList();

var nextListItem = function() {
    var item = list.pop();

    if (item) {
        // process the list item...
        nextListItem();
    }
};

Answer 1

This will sound weird, but use a setTimeout.

Like this:

//fill it with 50000 elements
var list = Array(50001).join('1.1').split('.');

var nextListItem = function() {
    var item = list.pop();

    if (item) { //should be list.length

        // recursion here!
        setTimeout( nextListItem, 0 );

    }
};
nextListItem();

The recursion now is endless!

Notice that some browsers don't like that 0 there.
As a side-effect, your code won't block the browser.