duplicate ajax requests at random

Question

I noticed that sometimes(randomly) my Mootools ajax request gets send twice. The second request succeeds right away but the first just keeps waiting indefinitely. I'm not sure if it's a bug in Mootools or something I've done.

This has been verified with firebug in firefox and developer console in chrome. I couldn't verify it in IE, but the symptoms are the same.

I actually managed to take a screenshot of firebug showing the problem: http://janipeltoniemi.net/ajax.png

On the right you see the request loop script I wrote for testing purposes. It just makes a request with a new id after the previous request has completed, so nothing fancy there. The final 2 lines in the console demonstrate the problem I'm having. As you can see, they both have the same response and the same id. The md5 hash is generated using md5(microtime(1)), so it should be different if these 2 actually were different requests with the same id.

The loop stops at that point because it it doesn't fire the onSuccess event when the last one completes. I'm guessing it would fire it when the other request gets completed, but that hasn't happened yet.

Any ideas what's happening here?

Almost forgot, I'm using Mootools 1.2.4

The code in the image:

r = new Request.HTML();
counter = 0;
//increments the counter and requests hello.php
go = function() {
  counter += 1;
  //The loop was too fast and producted some side effects when delay was not used
  r.get.delay( 10, r, [ 'templates/hello.php', { counter: counter } ] )
}
//Create an endless loop. When the request from go() is finished, call go()
r.addEvent( 'success', go );
//Start the endless loop
go();

Answer 1

this seems to do with recycling the old instance of the Request class before it's "ready" so the old request fires the onSuccess w/o the server closing up the connection where the client loses interest and restarts it, leaving firebug in a waiting state.

http://www.jsfiddle.net/dimitar/NF2jz/201/

var r = new Request.HTML({
    url: '/ajax_html_echo/',
    data: {'html': "hello"},
    method: 'post',
    update: 'target_div',
    onSuccess: function(response) {
        (function() {
            go(); // you can reproduce the bug by removing the delay wrap
        }).delay(1000);
    }
});

var counter = 0;

var go = function() {
    counter++;
    // despite of trying r.cancel(), it does not cancel, 
    // you can set onCancel to test this;
    r.cancel().setOptions({
        data: {html: "attempt " + counter}
    }).send();

};

go();

strictly speaking, if you run off of an anonymous function, you don't need to be recycling the old instance - or even save it.

what i would do is something like this (but probably refactored so it can be cancelled):

var counter = 0;
(function go() {
    counter++;
    // fresh instance after success / complete:
    new Request.HTML({
        url: '/ajax_html_echo/',
        data: {'html': "hello " + counter},
        method: 'post',
        update: 'target_div',
        onSuccess: function(response) {
            go();
        }
    }).send();
})();

http://www.jsfiddle.net/dimitar/NF2jz/202/ demoing last code, works fine and in a way that completes and does not interfere with each other.