webentwicklung-frage-antwort-db.com.de

Finden Sie heraus, wie lange eine Ajax-Anfrage für die Ausführung benötigte

Wie kann man herausfinden, wie lange eine bestimmte $.ajax()-Anforderung gedauert hat? 

Ich möchte diese Informationen erhalten und sie dann irgendwo auf der Seite anzeigen.

ANTWORTEN??::::

Ich bin neu bei Javascript. Dies ist das Beste, das ich mir vorstellen könnte, wenn Sie die Funktion "Erfolg" nicht integrieren wollen (weil dies eine viel größere Funktion sein wird). Ist das überhaupt eine gute Möglichkeit, dies zu tun? Ich habe das Gefühl, ich bin übermäßig kompliziert ...:

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

Codemeit hat recht. Seine Lösung sieht in etwa wie folgt aus, indem er jQuery für die Ajax-Anforderung verwendet. Dies gibt die Anforderungszeit in Millisekunden zurück.

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

Dies ist der richtige Weg, dies zu tun.

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

Dies liefert keine genauen Timings, da Javascript eine Ereigniswarteschlange verwendet. Das bedeutet, dass Ihr Programm folgendermaßen ausgeführt werden kann:

  • Starten Sie die Anfrage AJAX
  • Behandeln Sie in der Zwischenzeit ein wartendes Mausklickereignis/eine andere wartende Codezeile
  • Beginnen Sie mit der Verarbeitung der AJAX - Antwort

Leider gibt es keine Möglichkeit, die Uhrzeit zu ermitteln, zu der das Ereignis der Warteschlange hinzugefügt wurde, soweit ich weiß. Event.timeStamp gibt die Uhrzeit zurück, zu der das Ereignis aus der Warteschlange herausgeholt wurde. Siehe folgende Geige: 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 hat recht mit der Ereigniswarteschlange. Was Sie tun können, ist, Ihre Zeitstempel-Erstellung in einen Codeabschnitt zu legen, von dem Sie wissen, dass er so nah wie möglich am Anfang der Anforderung von AJAX ausgeführt wird.

Die aktuelle stabile Version von jQuery (zum Zeitpunkt des Schreibens: 2.2.2) hat einen beforeSend-Schlüssel, der eine Funktion akzeptiert. Ich würde es dort machen.

Beachten Sie, dass in JavaScript alle Variablen mit globalem Gültigkeitsbereich, die außerhalb einer Funktion deklariert sind, sobald das Programm gestartet wird, initialisiert werden. Das Verständnis des JavaScript-Bereichs wird hier helfen.

Der schwierige Teil ist der Zugriff auf die Variable, die Sie in der beforeSend-Funktion im success-Callback deklariert haben. Wenn Sie es lokal deklarieren (mithilfe von let), können Sie außerhalb des Funktionsumfangs der Funktion nicht einfach darauf zugreifen.

Hier ein Beispiel, das etwas genauere Ergebnisse liefert (Vorbehalt: in den meisten Fällen!), Das auch dangerous ist, da es eine global begrenzte Variable (start_time) deklariert, die mit anderen Skripten schlecht interagieren kann auf derselben Seite usw.

Ich würde gerne in die Welt von JavaScripts Prototyp bind function eintauchen, aber das ist ein bisschen zu wenig. Hier ist eine alternative Antwort, mit Vorsicht und außerhalb der Produktion.

'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

Sie können die Startzeit auf eine Variable setzen und die Zeitdifferenz berechnen, wenn die Aktion AJAX abgeschlossen ist.

Sie können das Firefox-Plug-In-Firebug verwenden, um die Leistung der AJAX -Anforderung und -Antwort zu überprüfen. http://getfirebug.com/ Oder Sie könnten Charles Proxy oder Fiddler verwenden, um den Datenverkehr zu beobachten, um die Leistung zu sehen usw.

4
Ray Lu

Wie wäre es damit:

First Global Legt die Eigenschaft TimeStarted mit dem Anforderungsobjekt fest. 

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

Und dann einen Ajax anrufen

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

    }
}

dies gibt eine Ausgabe in Millisekunden aus

0
Katta Nagarjuna

Ich fummelte ein wenig und bekam eine generische Funktion, die für alle Ajax-Aufrufe angezeigt werden kann. Dies bedeutet, dass Sie nicht für jeden Ajax-Aufruf dasselbe tun müssen

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