代码之家  ›  专栏  ›  技术社区  ›  Developer

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

  •  3
  • Developer  · 技术社区  · 14 年前

    我有一张超过100行的桌子。

    每一行由pdf文件及其状态最后一列的描述组成。

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

    处理每个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') ;
    
                                }
                        }
                    }); 
    
        });
    
    1 回复  |  直到 14 年前
        1
  •  9
  •   thejh    14 年前

    使用异步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);