Узнайте, как долго длился запрос Ajax

Ответ 1

@codemeit прав. Его решение выглядит примерно так, используя jQuery для запроса ajax. Это возвращает время запроса в миллисекундах.

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

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

Ответ 2

Это правильный способ сделать это.

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

Ответ 3

Это не даст точных таймингов, потому что javascript использует очередь событий. Это означает, что ваша программа может выполняться следующим образом:

• Запустите запрос AJAX
• Обработать ожидающее событие щелчка мыши/любую другую строку ожидания кода тем временем
• Начать обработку ответа AJAX

К сожалению, нет способа получить время, когда событие было добавлено в очередь, насколько я знаю. 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();
    }
});

Ответ 4

Aristoteles прав насчет очереди событий. То, что вы можете сделать, - это скопировать создание временной метки в раздел кода, который, как вы знаете, будет выполнен как можно ближе к началу запроса AJAX.

Текущая стабильная версия jQuery (на момент написания: 2.2.2) имеет ключ beforeSend, который принимает функцию. Я бы сделал это там.

Обратите внимание, что в JavaScript все переменные с глобальным охватом, объявленные вне функции, инициализируются сразу после запуска программы. Понимание области JavaScript поможет здесь.

Сложная часть - это доступ к переменной, объявленной в функции beforeSend в обратном вызове success. Если вы объявите его локально (используя let), вы не сможете легко получить доступ к нему за пределами области этой функции.

Вот пример, который даст несколько более точные результаты (в большинстве случаев: оговорка), которая также опасна, так как она объявляет переменную с глобальным охватом (start_time), которая может плохо взаимодействовать с другие скрипты на одной странице и т.д.

Мне бы очень хотелось погрузиться в мир прототипа JavaScript bind, но он немного вышел из сферы видимости. Вот альтернативный ответ, используйте с осторожностью и вне производства.

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

Ответ 5

Вы можете установить время начала для var и вычислить разницу во времени, когда действие AJAX завершено.

Вы можете использовать Firebug плагина Firefox, чтобы проверить производительность запроса и ответа AJAX. http://getfirebug.com/ Или вы можете использовать прокси-сервер Charles или Fiddler, чтобы обнюхать трафик, чтобы увидеть производительность и т.д.

Ответ 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) {

    }
}

это дает результат в мсек. like makeRequest: 1355.4951171875ms

Ответ 7

Как насчет этого:

Сначала глобально Установите свойство TimeStarted с объектом запроса.

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

А потом назовите любой аякс

var request = $.ajax({ 
    async : true,
    success : function(){
    alert(request.TimeStarted);
   },
});

Ответ 8

Я немного поиграл и получил универсальную функцию, которая может отображаться для всех вызовов 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);
  }
});