jquery ajax вызывает цикл один за другим, не останавливая рендеринг страницы

Question

У меня есть таблица из более чем 100 строк.

каждая строка состоит из pdf-файлов и их описания с Последним столбцом STATUS.

STATUS ПОКАЗЫВАЕТ, являются ли pdf-файлы доступными для чтения,

Как только таблица загружена в браузер, я получаю каждое имя файла из каждой строки таблицы и обрабатываю его с помощью вызова ajax.если файл доступен для чтения, я обновляю поле состояния этой строки как READABLE.Обработка каждого файла PDF занимает от 30 секунд до 1 минуты (в зависимости от размера файла)

Я не хочу использовать асинхронный вызов и отправлять все 100 запросов на мой сервер.

когда я использую async = false.он выполняет каждый вызов ajax один за другим, это то, что я хочу сделать, но в то же время он останавливает пользователя для просмотра загруженной таблицы.другими словами, пользователь застревает до тех пор, пока все эти запросы ajax не будут выполнены.Затем он может прокрутить вниз до читателя дополнительную информацию.

Я хочу разрешить пользователю читать веб-страницу, в то время как в фоновом режиме я хочу выполнять ajax-запросы один за другим для обработки PDF-файлов и обновления их статуса в каждой строке.

Как я могу это сделать.

$('table.tableRecods tr').each(function(){

            fileWithPath = $('#filePath').text();
            $this = $(this);
            $this.find('td.status img.cropStatus').attr('src', 'img/loader.gif') ;           
                $.ajax({
                    url:'jsonCall.php',
                    async:false,
                    data: {file: escape(fileWithPath)},
                    success: function(data){        

                            if(data.status == 'true') {
                                $this.find('td.status img.readStatus').attr('src', 'img/icons/read.png') ;                                  
                            }else if(data.status == 'false'){
                                $this.find('td.status img.readStatus').attr('src', 'img/icons/__read.png') ;

                            }
                    }
                }); 

    });

Answer 1

Использовать асинхронный AJAX.Вы можете, например, иметь массив со всеми строками таблицы, которые вы хотите обработать, взять первую из массива и запустить запрос для него.Поместите код в прослушиватель, который запускает следующий запрос после завершения последнего.

var toRequest=new Array("test1", "test2", "test3");
function doRequest(index) {
  $.ajax({
    url:'jsonCall.php?data='+toRequest[index],
    async:true,
    success: function(data){        
      //do whatever you want do do

      if (index+1<toRequest.length) {
        doRequest(index+1);
      }
    }
  }); 
}
doRequest(0);