jquery等待Ajax调用完成

Question

如果有这个jQuery脚本将文件从ftp服务器1移动到ftp服务器2.它确实有效，但我想要一个一个移动文件，而不是一次全部移动。无严寒与浏览器的“异步=假” ..

<script> 
    var files = new Array(); 
    files[1]="testfile1.txt"; 
    files[2]="testfile2.txt"; 
    files[3]="testfile3.txt"; 


    $('#button').click(function() { 
     $.each(files, function(key, value) { 
     jQuery.ajax({ 
     url: '/move.php', 
     method: 'GET', 
     data: { 
     file: value 
     }, 
     success: function(data) { 
      $('#'+ key).html(data); 
     } 
     }) 
    }); 
    }); 
    </script> 

Answer 1

创建一个函数，将得到files数组中的下一个项目，执行AJAX调用，然后调用自身的success回调AJAX调用的。

var files = new Array(), key = 1; 
// arrays are generally indexed starting at 0, but I left the below as is 
files[1]="testfile1.txt"; 
files[2]="testfile2.txt"; 
files[3]="testfile3.txt"; 


function moveFile() { 
    if(key < files.length) { // there's a next element 
     var value = files[key]; 
     $.ajax({ 
      url: '/move.php', 
      method: 'GET', 
      data: { 
       file: value 
      }, 
      success: function(data) { 
       $('#' + key++).html(data); 
       moveFile(); 
      } 
     }); 
    } 
} 

$('#button').click(moveFile); 

我认为使用files.pop();获得下一个元素，但因为我不知道你是否想在阵列保持不动这个已经用完之后，我决定来跟踪，而不是访问它们的索引。

Answer 2

你可以做到这一点递归：

var files = new Array(); 
    files[1]="testfile1.txt"; 
    files[2]="testfile2.txt"; 
    files[3]="testfile3.txt"; 

$('#button').click(function() { moveFile(files); }); 


function moveFile(fileArray) { 
    var currentFile = fileArray.shift(); 
    $.ajax({ 
    url: '/move.php', 
    method: 'GET', 
    data: { 
     file: currentFile 
    } 
    }).done(function() { 
    if(fileArray.length > 0) 
     moveFile(fileArray); 
    }); 
}