web-dev-qa-db-fra.com

Découvrez le temps requis pour traiter une demande Ajax

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

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

RÉPONSE??::::

Je suis nouveau dans le javascript, c'est le meilleur que je pourrais trouver si vous ne voulez pas intégrer la fonction "success" (car ce sera une fonction beaucoup plus grande). Est-ce même un bon moyen de le faire? J'ai l'impression de trop compliquer les choses ...:

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;
    }
}
javascriptjqueryxmlhttprequest
46
Chris Dutrow

Codemeit a raison. Sa solution ressemble à la suivante en utilisant jQuery pour la requête ajax. Cela renvoie le temps de 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;
    }
);
47
Isaac

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/

11
Anonymous

Cela ne donnera pas de timings précis car javascript utilise une file d'attente event . Cela signifie que votre programme peut s'exécuter comme ceci:

  • Lancer la demande AJAX
  • Gérer un événement de clic de souris en attente/toute autre ligne de code en attente entre-temps
  • Commencez à gérer la réponse AJAX ready

Malheureusement, il n'y a aucun moyen de connaître l'heure à laquelle l'événement a été ajouté à la file d'attente. Event.timeStamp renvoie l'heure à laquelle l'événement a été extrait 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();
    }
});
9
Aristoteles

Aristoteles a raison sur la file d'attente des événements. Ce que vous pouvez faire est de glisser la création de votre horodatage dans une section de code qui sera exécutée aussi près que possible du début de la demande AJAX.

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

Notez qu'en JavaScript, toutes les variables globales déclarées en dehors d'une fonction _ _ sont initialisées dès le démarrage du programme. Comprendre la portée de JavaScript aidera ici.

La partie délicate consiste à accéder à la variable que vous avez déclarée dans la fonction beforeSend du rappel success. Si vous le déclarez localement (avec let), vous ne pourrez pas y accéder facilement en dehors de la portée de cette fonction.

Voici un exemple qui donnera des résultats légèrement plus précis (mise en garde: dans la plupart des cas!), Qui est également dangereux, car elle déclare une variable à portée globale (start_time) qui pourrait mal interagir avec d'autres scripts sur la même page, etc.

J'aimerais bien plonger dans le monde du prototype bind function de JavaScript, mais c'est un peu hors de portée. Voici une autre réponse, à utiliser avec précaution 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));
    }
]);
6
GrayedFox

Vous pouvez définir l'heure de début sur une variable et calculer le décalage horaire lorsque l'action AJAX est terminée.

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

4
Ray Lu

Que dis-tu de ça:

First Globally Définissez la propriété TimeStarted avec l'objet request. 

$(document).ajaxSend(function (event, jqxhr, settings) {
    jqxhr.TimeStarted = new Date();
});

Et ensuite appelez n'importe quel ajax 

var request = $.ajax({ 
    async : true,
    success : function(){
    alert(request.TimeStarted);
   },
});
0
Bimal Das
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) {

    }
}

cela donne la sortie en ms secondes.

0
Katta Nagarjuna

J'ai bricolé un peu et obtenu une fonction générique qui peut être affichée pour tous les appels ajax. Cela signifie que vous n'avez pas à faire la même chose pour chaque appel ajax

var start_time;   
$.ajaxSetup({
  beforeSend: function () {
    start_time = new Date().getTime();
  },
  complete: function () {
    var request_time = new Date().getTime() - start_time;
    console.log("ajax call duration: " + request_time);
  }
});
0
yi-yu bruce liu