Find out how long an Ajax request took to complete

@codemeit is right. His solution looks something like the following using jQuery for the ajax request. This returns the request time in milliseconds.

var start_time = new Date().getTime();

jQuery.get('your-url', data, function(data, status, xhr) {
        var request_time = new Date().getTime() - start_time;
});

This is the proper way to do it.

$.ajax({
    url: 'http://google.com',
    method: 'GET',
    start_time: new Date().getTime(),
    complete: function(data) {
        alert('This request took '+(new Date().getTime() - this.start_time)+' ms');
    }
});

https://jsfiddle.net/0fh1cfnv/1/

This will not give accurate timings because javascript uses an event queue. That means your program may execute like this:

Start AJAX request
Handle a waiting mouse click event / any other waiting line of code in the meantime
Start handling the AJAX ready response

Unfortunately there is no way to get the time the event was added to the queue as far as I know. Event.timeStamp returns the time the event was popped from the queue, see this fiddle: http://jsfiddle.net/mSg55/.

Html:

<a href="#">link</a>
<div></div>

Javascript:

$(function() {
    var startTime = new Date();
    $('a').click(function(e) {
        var endTime = new Date(e.timeStamp);
        $('div').append((endTime - startTime) + " ");
        //produce some heavy load to block other waiting events
        var q = Math.PI;
        for(var j=0; j<1000000; j++)
        {
            q *= Math.acos(j);
        }
    });

    //fire some events 'simultaneously'
    for(var i=0; i<10; i++) {
        $('a').click();
    }
});

Aristoteles is right about the event queue. What you can do is slip your timestamp creation into a section of code you know will be executed as close as possible to the beginning of the AJAX request.

The current stable version of jQuery (at time of writing: 2.2.2) has a beforeSend key which accepts a function. I would do it there.

Note that in JavaScript, all globally scoped variables that are declared outside of a function are initialized as soon as the program starts up. Understanding JavaScript scope will help here.

The tricky part is accessing the variable you declared in the beforeSend function in the success callback. If you declare it locally (using let) you can't easily access it outside of that function's scope.

Here is an example which will give slightly more accurate results (caveat: in most cases!) which is also dangerous since it declares a globally scoped variable (start_time) which could interact badly with other scripts on the same page, etc.

I would love to dive into the world of JavaScript's prototype bind function but it's a bit out of scope. Here is an alternate answer, use with care, and outside of production.

'use strict';
$.ajax({
    url: url,
    method: 'GET',
    beforeSend: function (request, settings) {
        start_time = new Date().getTime();
    },
    success: function (response) {
        let request_time = new Date().getTime() - start_time;
        console.log(request_time);
    },
    error: function (jqXHR) {
        console.log('ERROR! \n %s', JSON.stringify(jqXHR));
    }
]);

Find out how long an Ajax request took to complete

Related

Recent Posts