web-dev-qa-db-ja.com

Ajaxリクエストが完了するまでにかかった時間を調べる

特定の$.ajax()リクエストにかかった時間を知る良い方法は何ですか？

この情報を取得して、ページのどこかに表示したいと思います。

ANSWER ?? ::::

私はjavascriptを初めて使用しますが、これは「成功」関数をインライン化したくない場合に思いつく最高です（より大きな関数になるため）これはこれを行う良い方法ですか？私は物事を複雑にしています...：

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
49
Chris Dutrow

@codemeitは正しい。彼のソリューションは、ajaxリクエストにjQueryを使用する次のようなものです。これは、ミリ秒単位でリクエスト時間を返します。

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

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

これが適切な方法です。

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

15
Anonymous

Javascriptは イベントキュー を使用するため、これは正確なタイミングを提供しません。つまり、プログラムは次のように実行できます。

  • 開始AJAXリクエスト
  • 待機中のマウスクリックイベント/その他の待機中のコード行の処理
  • AJAX readyレスポンスの処理を開始します

残念ながら、私が知る限り、イベントがキューに追加された時間を取得する方法はありません。 Event.timeStampは、イベントがキューからポップされた時間を返します。このフィドルを参照してください： 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はイベントキューについて正しいです。できることは、タイムスタンプの作成を、AJAXリクエストの先頭にできるだけ近い場所で実行されることがわかっているコードのセクションにスリップすることです。

JQueryの現在の安定バージョン（執筆時点：2.2.2）には、関数を受け入れるbeforeSendキーがあります。私はそこでそれをするでしょう。

JavaScriptでは、関数の外部で宣言されたすべてのグローバルスコープの変数は、プログラムが起動するとすぐに初期化されることに注意してください。ここではJavaScriptスコープを理解するのが役立ちます。

トリッキーな部分は、beforeSendコールバックのsuccess関数で宣言した変数にアクセスすることです。 （letを使用して）ローカルで宣言すると、その関数のスコープ外では簡単にアクセスできません。

以下は、もう少し正確な結果（caveat：ほとんどの場合!）を与える例です。これもdangerousですグローバルスコープの変数（start_time）同じページ上の他のスクリプトとの相互作用などがあります。

JavaScriptのプロトタイプ bind functionの世界に飛び込みたいのですが、少し範囲外です。代替の答え、注意して使用し、生産の外にあります。

'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

開始時間をvarに設定し、AJAXアクションが完了したときの時間差を計算できます。

FirefoxプラグインFirebugを使用して、AJAX要求と応答のパフォーマンスを確認できます。 http://getfirebug.com/ または、Charlesプロキシまたはパフォーマンスを確認するためにトラフィックをスニッフィングするフィドラーなど.

4
Ray Lu

これについて：

最初にグローバルにリクエストオブジェクトでプロパティTimeStartedを設定します。

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

そして、任意のajaxを呼び出す

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

    }
}

これにより、makeRequest：1355.4951171875msのようなミリ秒単位の出力が得られます。

0
Katta Nagarjuna

私は少しいじって、すべてのajax呼び出しに対して表示できる汎用関数を得ました。これは、すべての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