jquery ajax calls loop one after another without stoping of page rendering

I have a table of of more then 100 rows.

each row consist of pdf files and their description with Last coloumn of STATUS.

STATUS SHOWS whether pdf files are readable are not.

Once table is loaded in the browser, I am geting each file name from every row of the table and processing it using ajax call. if file is readable, i update the status field of that row as READABLE. processing of each pdf file take 30sec to 1 minute (depending upon the size of file)

I don't want to use async call and send all of 100's of request to my server togather.

when I use async= false. it execute every ajax call one by one, that is what i want to do, but in the same time it stop user to browse the loaded table. so in other words user is kind of stuck untill all of those ajax requests are done. then he can scroll down to reader further information.

I want to allow user to read the web page while in the background i want to execute ajax requests one after another to process pdf files and update its status in every row.

How can I do that.

$('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){        

           开发者_如何学JAVA                 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') ;

                            }
                    }
                }); 

    });

Use asynchronous ajax. You could, for example, have an array with all the table rows you want to process, take the first one off the array and start a query for it. Put code in the listener that starts the next query when the last one finished.

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);