jquery ajax一个接一个地调用循环而不停止页面呈现

Question

我有一个超过100行的表.

每行包含pdf文件及其最后一个STATUS的描述.

状态显示pdf文件是否可读.

一旦在浏览器中加载了表,我就会从表的每一行创建每个文件名,并使用ajax调用对其进行处理.如果文件是可读的,我将该行的状态字段更新为READABLE.处理每个pdf文件需要30秒到1分钟(取决于文件的大小)

我不想使用异步调用并将所有100个请求发送到我的服务器togather.

当我使用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);