Découvrez combien de temps une requête Ajax a pris pour compléter

Question

Quel est un bon moyen de savoir combien de temps une demande particulière $.ajax() a pris?

Je voudrais obtenir cette information et ensuite l'afficher sur la page quelque part.

RÉPONSE ?? ::::

Je suis nouveau javascript, c'est le meilleur que je pouvais venir avec si vous ne voulez pas inline la fonction « succès » (parce qu'il sera une fonction beaucoup plus grande) Est-ce même un bon moyen de le faire? Je sens que je suis sur les choses ... compliquant:

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 est droite. Sa solution ressemble à ceci en utilisant jQuery pour la requête ajax. Cela renvoie l'heure de la requête en millisecondes.

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

Vous pouvez régler l'heure de début à un var et calculer la différence de temps lorsque l'action AJAX terminée.

Vous pouvez utiliser le plug-in Firefox Firebug pour vérifier les performances de la requête et de la réponse AJAX. http://getfirebug.com/ Ou vous pourriez utiliser Charles proxy ou Fiddler pour renifler le trafic pour voir la performance, etc

Answer 3

Cela ne donnera pas timings précis car javascript utilise un event queue. Cela signifie que votre programme peut exécuter comme ceci:

• requête AJAX démarrage
• Gérer un événement clic de souris en attente/toute autre file d'attente de code dans l'intervalle
• Démarrer Gestion de la réponse prête AJAX

Malheureusement, il n'y a aucun moyen d'obtenir l'heure à laquelle l'événement a été ajouté à la file d'attente autant que je sache. Event.timeStamp renvoie l'heure à laquelle l'événement a été retiré de la file d'attente, voir ce violon: 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 est juste au sujet de la file d'attente. Ce que vous pouvez faire est de glisser votre création d'horodatage dans une section de code dont vous savez qu'elle sera exécutée le plus près possible du début de la requête AJAX.

La version stable actuelle de jQuery (à l'heure de l'écriture: 2.2.2) a une clé beforeSend qui accepte une fonction. Je le ferais là.

Notez qu'en JavaScript, toutes les variables de portée globale déclarées en dehors d'une fonction sont initialisées dès le démarrage du programme. Comprendre la portée JavaScript aidera ici. La partie délicate est l'accès à la variable que vous avez déclaré dans la fonction beforeSend dans le rappel success. Si vous le déclarez localement (en utilisant let), vous ne pouvez pas y accéder facilement en dehors de la portée de cette fonction.

Voici un exemple qui donnera des résultats un peu plus précis (mise en garde: dans la plupart des cas) qui est aussi dangereuse car elle déclare une variable SCOPED globalement (start_time) qui pourrait interagir mal avec d'autres scripts sur la même page, etc.

Je serais ravi de plonger dans le monde de la fonction prototype bind de JavaScript, mais c'est un peu hors de portée. Voici une autre réponse, utilisez avec soin, et en dehors de la 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)); 
    } 
]); 

Answer 5

C'est la bonne façon de le faire.

$.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) { 

    } 
} 

ce qui donne en sortie msecondes comme makeRequest: 1355.4951171875ms