Find out how long an Ajax request took to complete

Question

What is a good way to find out how long a particular $.ajax() request took?

I would like to get this information and then display it on the page somewhere.

ANSWER??::::

I'm new to javascript, this is the best that I could come up with if you don't want to inline the "success" function (because it will be a much bigger function) Is this even a good way to do this? I feel like I'm over complicating things...:

makeRequest = function(){
    // Set start time
    var start_time = new Date().getTime();

    $.ajax({ 
        async : true,
        success : getRquestSuccessFunction(start_time),
    });
}

getRquestSuccessFunction = function(start_time){
    return function(data, textStatus, request){
        var request_time = new Date().getTime() - start_time;
    }
}

Answer 1

You can set the start time to a var and calculate the time difference when the AJAX action completed.

You can utilise Firefox plug-in Firebug to check the performance of the AJAX request and response. http://getfirebug.com/ Or you could utilise Charles proxy or Fiddler to sniff the traffic to see the performance etc.

Answer 2

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;
    }
);