ajaxStart() called only once but ajaxComplete() called multiple times

Question

I would like to do something on the call of every AJAX request on my page.

I read here that

ajaxStart (Global Event)

This event is broadcast if an Ajax request is started and no other Ajax requests are currently running.

and

ajaxComplete (Global Event)

This event behaves the same as the complete event and will be triggered every time an Ajax request finishes.

This means I can only track the start of one ajax event and not each individual request?

$(document).ajaxStart(function () {
    var t = new Date(),
        h = t.getHours(),
        m = t.getMinutes(),
        s = t.getSeconds(),
        ms = t.getMilliseconds();
    console.log("Triggered ajaxStart handler   at " + h + ":" + m + ":" + s + ":" + ms);
});


$(document).ajaxComplete(function () {
    var t = new Date(),
        h = t.getHours(),
        m = t.getMinutes(),
        s = t.getSeconds(),
        ms = t.getMilliseconds();
    console.log("Triggered ajaxComplete handler at " + h + ":" + m + ":" + s + ":" + ms);
});

gives me

Triggered ajaxStart handler    at 11:14:33:409 
Triggered ajaxComplete handler at 11:14:33:480 
Triggered ajaxComplete handler at 11:14:33:489 
Triggered ajaxComplete handler at 11:14:33:491 
Triggered ajaxComplete handler at 11:14:33:492 
Triggered ajaxComplete handler at 11:14:33:535 
Triggered ajaxComplete handler at 11:14:33:539 
Triggered ajaxComplete handler at 11:14:33:567 
Triggered ajaxComplete handler at 11:14:33:569 

Is there any way to log every ajax start so I can attach an even to every single ajax event?

Answer 1

You want the .ajaxSend event, which is sent for every AJAX request, not just the first outstanding one.