Jquery wait for Ajax call complete

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