Как измерить время выполнения ajax-запросов?

Question

Всем привет у меня ajax-запросы выполняются в цикле:

let startTime = (new Date).getTime();
for (let csv_file of csv_files)
{
    $.ajax({
       url: '/load',
       type: 'POST',
       headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
       },
       data: {                         
           csv_file: csv_file,
       },
       success:function (data)
       {
           // мой код...
       },
       error: function (err)
       {
           console.log('Error');
           console.log(err);                           
       }
   })
}
let endTime = (new Date).getTime();
console.log(`На выполнение скрипта ушло ${endTime - startTime} ms`)

Дело в том, что он сначала выводит время выполнения скрипта, а уж потом начинает выполняет ajax-запросы. Я так понял, ajax выполняет запросы асинхронно. Как можно измерить время выполнения этого скрипта или как отловить конец работы скрипта?

Answer 1

Т.к. AJAX - Asynchronous Javascript and XML — «асинхронный JavaScript и XML»), то так как Вы делаете не получится. Возможно надо ещё обрабатывать события:

 $.ajax({
   beforeSend: function(){
     // Handle the beforeSend event
   },
   complete: function(){
     // Handle the complete event
   }
   // ......
 });

Answer 2

Вот так можно замерять асинхронные функции. console.time автоматически будет высчитывать время по лэйблу между time и timeEnd. Если так не нравится, то раскомментируйте ваш код с разницей дат.

function getData(csv_file) {
    return new Promise((resolve, reject) => {
        /*setTimeout(() => {
            resolve(true)
        }, 500); */
        $.ajax({
        url: '/load',
        type: 'POST',
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        },
        data: {
            csv_file: csv_file,
        },
            success:function (data)
        {
            // мой код...
            resolve(someData); // Успех
        },
        error: function (err)
        {
            console.log('Error');
            console.log(err);
            reject(err); // Ошибка
        }
        })*/
    })
}

async function sender() {
    //let startTime = (new Date).getTime();
    console.time('all');
    for (let csv_file of csv_files) {
    console.time(`${csv_file}`);
    await getData(csv_file);
    console.timeEnd(`${csv_file}`);
    }
    console.timeEnd('all');
    //let endTime = (new Date).getTime();
    //console.log(`На выполнение скрипта ушло ${endTime - startTime} ms`)
}

sender().then((res) => {
    console.log('Работа функции sender завершена');
})

Answer 3

давайте уберем вывод в окончание ajax'овского вызова, а чтобы проверить, что он последний, сделаем счетчик от длины массива до нуля

let startTime = (new Date).getTime();
let cnt = csv_files.length;
for (let csv_file of csv_files)
{
    $.ajax({
       url: '/load',
       type: 'POST',
       headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
       },
       data: {                         
           csv_file: csv_file,
       },
       success:function (data)
       {
           // мой код...
       },
       error: function (err)
       {
           console.log('Error');
           console.log(err);                           
       }
       complete: function () 
       {
       if (! --cnt) {                           // окончен последний вызов
          let endTime = (new Date).getTime();
          console.log(`На выполнение скрипта ушло ${endTime - startTime} ms`)
          }
       }
   })
}

БЛОГ НА HUSL

Как измерить время выполнения ajax-запросов?

Ответы (3 шт):