Question

如果有这个jQuery脚本将文件从ftp服务器1移动到ftp服务器2.它确实有效，但我想逐个移动文件，而不是一次移动。不使用“async = false”冻结浏览器..

 <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调用，然后在该AJAX调用的success回调中调用自身。

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

Jquery等待Ajax调用完成

2 个答案: