title: For loop continue looping only when a function inside is finish?
body: <p>Here is an function first getting a file list, for each file, it will call a ajax function to execute something:</p>
  
  <pre><code>    function getImagesList(folder) {
          $.ajax({
              type:"POST",
              url: "getImgList.php",
              data: {"data":folder},
              dataType: "json",
              success: function (data) {
                  var IsfirstLoggingItem = "true";
                  for (var key in data) {
                      //alert (data[key]);
                      pdfToImgExec (data[key],IsfirstLoggingItem,folder,1);
                      $('#pdfToImgResult').append('&lt;p&gt;Processing ' + data[key] + ' &lt;img src="loading.gif" height="20" width="20"/&gt;&lt;/p&gt;');
                      IsfirstLoggingItem = "false";
                  }
                  folder == 'Incoming' ? getImagesList('result') : pdfToImgResult();
              },
              error: function(x, t, m) {
                  $('#pdfToImgResult').html('&lt;p&gt;Error&lt;/p&gt;');
                  alert (t);
                  releaseBtn();
              }
          }); 
      }
  </code></pre>
  
  <p>This is the callee function, it contains an ajax function to execute something</p>
  
  <pre><code>    function pdfToImgExec(file,IsfirstLogging,folder,round){
              var postString = file + '&amp;' + IsfirstLogging + '&amp;' + folder;
              $.ajax({
                  type: "POST",
                  url: "pdfToImgExec.php",
                  data: {"data":postString},
                  dataType: "html",
                  success: function (data) {
                      if (data) {
                          $('#pdfToImgResult').html('').append('&lt;p&gt;Finish processing ' + file + '&lt;/p&gt;');
                      } else if (!data &amp;&amp; round &lt; 4) {
                          $('#pdfToImgResult').html('').append('&lt;p&gt;Encounter error in processing ' + file + '  ， retrying ' + round + ' round &lt;/p&gt;');
                          round++;
                          pdfToImgExec(file,IsfirstLogging,folder,round);
                      }
                  },
                  error: function(x, t, m) {
                      $('#pdfToImgResult').html('errpr');
                      alert (t);
                      releaseBtn();
                  }
              }); 
      }
  </code></pre>
  
  <p>In short, the getImagesList function get a file list, for each file , call the pdfToImgExec function to do some ajax staff. The problem is , it will not wait the ajax staff finish but start the next loop . </p>
  
  <p>That means , I would like to e.g. file1 running ajax staff => file1 finish ajax staff => file2 running ajax staff => file2 finish => check result</p>
  
  <p>However, the current situation is file1 running ajax staff => file2 running ajax staff =>  check result => file1 finish / file2 finish </p>
  
  <p>I have tried async:false, cache :false in both function but it seem no help, how to fix it? thanks</p>