Why does recursion through XHR's asynchronous onreadystatechange event consume the stack?

I'm getting a stack overflow error on some, but not all, IE7 machines.

This function downloads a bunch URL-based resources and does nothing with them. It runs on my login page and its purpose is to fetch static content while your typing in your credentials, so that when you really need it, the browser can get it from its local cache.

// Takes an array of resources URLs and preloads them sequentially,
// but asynchronously, using an XHR object.
function preloadResources(resources) {

    // Kick it all off.
    if (resources.length > 0) {
        var xhr = getXHRObject(); // Prepare the XHR object which will be reused for each request.
        xhr.open('GET', resources.shift(), true);
        xhr.onreadystatechange = handleReadyStateChange;
        xhr.send(null);
    }

    // Handler for the XHR's onreadystatechange event.  Loads the next resource, if any.
    function handleReadyStateChange() {
        if (xhr.readyState == 4) {
            if (resources.length > 0) {
                xhr.open('GET', resources.shift(), true);
                xhr.onreadystatechange = arguments.callee;
                xhr.send(null);
            }
        }
    }

    // A safe cross-browser way to get an XHR object.
    function getXHRObject() {
        // Clipped for clarity.
    }

} // End preloadResources().

It's called like this:

preloadResources([
    'http://example.com/big-image.png',
    'http://example.com/big-stylesheet.css',
    'http://example.com/big-script.js']);

It recursively processes an array of URLs. I thought it wasn't susceptible to stack overflow errors because each recursion is called from an asynchronous event -- the XHR's onreadystatechange event (notice that I'm calling xhr.open() asynchronously). I felt doing so 开发者_JAVA百科would prevent it from growing the stack.

I don't see how the stack is growing out of control? Where did I go wrong?

Doing the recursion with a timer prevented the stack overflow problem from appearing.

// Handler for the XHR's onreadystatechange event.  Loads the next resource, if any.
function handleReadyStateChange() {
    if (xhr.readyState == 4 && resources.length > 0) {
        setTimeout(function() {
            xhr.open('GET', resources.shift(), true);
            xhr.onreadystatechange = handleReadyStateChange;
            xhr.send(null);
        }, 10);
    }
}

I guess chaining XHR requests to one another consumes the stack. Chaining them together with a timer prevents that -- at least in IE7. I haven't seen the problem on other browsers, so I can't tell.

Can you perhaps console log or alert the value of arguments.callee ? I'm curious what would happen if it resolves to the arguments variable from the preloadResources() function instead of handleReadyStateChange(). Doesn't seem likely to me, but it jumps out at me just eyeballing your code.

In answer to your question, however - I think one bad practice in the code above is reusing the XmlHttpRequest object, especially without ever letting the lifecycle complete or calling xhr.abort(). That's a no-no I tucked away a while back. It's discussed here and various places around the web. Note that IE particularly doesn't work well with reusing the xhr. See http://ajaxian.com/archives/the-xmlhttprequest-reuse-dilemma .

Hope this helps,

Scott