Descubra quanto tempo um pedido do Ajax levou para concluir

O que é uma boa maneira de descobrir quanto tempo uma solicitação específica de $.ajax() levou?

Eu gostaria de obter essa informação e, em seguida, exibi-lo na página em algum lugar.

RESPONDA??::::

Eu sou novo em javascript, isso é o melhor que eu poderia criar se você não quiser inline a function “sucesso” (porque será uma function muito maior) Isso é mesmo uma boa maneira de fazer isso? Eu sinto que estou complicando demais as coisas …:

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

   

Codemeit está certo. Sua solução é parecida com a seguinte usando jQuery para o pedido de ajax. Isso retorna o tempo de solicitação em milissegundos.

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

Isso não fornecerá tempos precisos porque o JavaScript usa uma fila de events . Isso significa que seu programa pode ser executado assim:

  • Iniciar pedido AJAX
  • Lidar com um evento de clique do mouse em espera / qualquer outra linha de código de espera nesse meio tempo
  • Comece a lidar com a resposta pronta do AJAX

Infelizmente, não há como chegar a hora em que o evento foi adicionado à fila, tanto quanto eu sei. Event.timeStamp retorna a hora em que o evento foi retirado da fila, veja este violino: http://jsfiddle.net/mSg55/ .

Html:

 link 

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

Essa é a maneira correta de fazer isso.

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

Aristoteles está certo sobre a fila de events. O que você pode fazer é inserir sua criação de registro de data e hora em uma seção do código que você sabe que será executada o mais próximo possível do início da solicitação do AJAX.

A versão estável atual do jQuery (no momento da escrita: 2.2.2) possui uma chave beforeSend que aceita uma function. Eu faria isso lá.

Observe que, em JavaScript, todas as variables ​​com escopo global declaradas fora de uma function são inicializadas assim que o programa é inicializado. Entender o escopo do JavaScript ajudará aqui.

A parte difícil é acessar a variável que você declarou na function beforeSend no callback de success . Se você declarar localmente (usando let ), não poderá acessá-lo facilmente fora do escopo dessa function.

Aqui está um exemplo que dará resultados um pouco mais precisos ( advertência: na maioria dos casos! ) Que também é perigoso, pois declara uma variável com escopo global ( start_time ) que poderia interagir mal com outros scripts na mesma página, etc.

Eu adoraria mergulhar no mundo da function de vinculação do protótipo do JavaScript, mas é um pouco fora do escopo. Aqui está uma resposta alternativa, use com cuidado e fora da produção.

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

Você pode definir a hora de início para um var e calcular a diferença de tempo quando a ação AJAX for concluída.

Você pode utilizar o Firebug do plug-in do Firefox para verificar o desempenho da solicitação e resposta do AJAX. http://getfirebug.com/ Ou você pode utilizar o proxy Charles ou o Fiddler para farejar o tráfego para ver o desempenho etc.

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

isto dá saída em msegundos como makeRequest: 1355.4951171875ms