Averigüe cuánto tiempo tomó una solicitud de Ajax para completar

Question

¿Cuál es una buena manera de averiguar cuánto tiempo tomó una solicitud particular de $.ajax()?

Me gustaría obtener esta información y luego mostrarla en la página en alguna parte.

RESPUESTA ?? ::::

Soy nuevo en Javascript, esto es lo mejor que podría llegar a si no se desea la función inline "éxito" (porque será una función mucho más grande) ¿Es esta una buena manera de hacer esto? Siento que estoy por encima de complicar las cosas ...:

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

Codemeit tiene razón. Su solución se parece a la siguiente usando jQuery para la solicitud de Ajax. Esto devuelve el tiempo de solicitud en milisegundos.

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

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

Answer 2

se puede establecer el tiempo de inicio a un var y calcular la diferencia de tiempo cuando la acción AJAX completó.

Puede utilizar el complemento Firebug de Firefox para verificar el rendimiento de la solicitud y respuesta de AJAX. http://getfirebug.com/ O podría utilizar Charles proxy o Fiddler para oler el tráfico para ver el rendimiento, etc.

Answer 3

Esto no dará tiempos precisos porque javascript usa un event queue. Esto significa que su programa puede ejecutar la siguiente manera:

solicitud

• inicio AJAX
• manejar un clic del ratón evento/cualquier otra línea de espera a la espera de su código mientras
• manejar la respuesta preparada AJAX

de inicio

Lamentablemente, no hay forma de obtener la hora en que el evento se agregó a la cola hasta donde yo sé. Event.timeStamp devuelve la hora en que se sacó el evento de la cola, consulte este violín: 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(); 
    } 
}); 

Answer 4

Aristoteles tiene razón sobre la cola de eventos. Lo que puede hacer es deslizar la creación de su marca de tiempo en una sección de código que sepa que se ejecutará lo más cerca posible del inicio de la solicitud de AJAX.

La versión estable actual de jQuery (al momento de escribir esto: 2.2.2) tiene una clave beforeSend que acepta una función. Yo lo haría allí.

Tenga en cuenta que en JavaScript, todas las variables con ámbito global que se declaran fuera de una función se inicializan tan pronto como se inicia el programa. Comprender el alcance de JavaScript ayudará aquí.

La parte engañosa es acceder a la variable declarada en la función beforeSend en la devolución de llamada success. Si lo declara localmente (usando let) no puede acceder fácilmente fuera del alcance de esa función.

Este es un ejemplo que dará resultados ligeramente más precisos (salvedad: en la mayoría de los casos) que es también peligrosa ya que declara un ámbito global variable (start_time) que podría interactuar mal con otros scripts en el misma página, etc.

Me encantaría sumergirme en el mundo de la función de prototipo de JavaScript bind pero está un poco fuera de alcance. Aquí hay una respuesta alternativa, use con cuidado y fuera de producción.

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

Answer 5

Esta es la manera correcta de hacerlo.

$.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/

Answer 6

makeRequest = function(){ 

    // Set start time 
    console.time('makeRequest'); 

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

getRquestSuccessFunction = function(start_time){ 

    console.timeEnd('makeRequest'); 

    return function(data, textStatus, request) { 

    } 
} 

esto le da salida en msegundos como makeRequest: 1355.4951171875ms