Узнайте, сколько времени потребовалось Ajax-запросу для выполнения

Question

Какой хороший способ узнать, сколько времени занимает конкретный запрос $.ajax()?

Я хотел бы получить эту информацию, а затем отобразить ее где-нибудь на странице.

ANSWER ?? ::::

Я новичок в javascript, это лучшее, что я мог бы придумать, если вы не хотите встроить функцию «success» (потому что это будет гораздо большая функция). Это даже хороший способ сделай это? Я чувствую, что я слишком усложняю вещи ...:

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

Answer 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/

Answer 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();
    }
});

Answer 4

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

Answer 5

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

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

Answer 6

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

Answer 7

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

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

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

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

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

Answer 8

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,4951171875мс