別のAjax関数が終了した後にアクションを実行します。

Question

解決策を探しています： 私のアプリケーション内のテーブルの内容を更新する関数があります。私はテーブルの行を更新しています別の関数で

function prev_update(cli_id){ 
    $("#list").empty(); 
    $("#list").append("<tr><td colspan=11><img src='images/loading.gif' alt=loading title=loading /></td></tr>"); 
    $.ajax({ 
     type  : 'POST', 
     url   : 'json/get.php?t=2&id='+cli_id, 
     dataType : 'json', 
     encode  : true 
    }) 
    .done(function(data) { 
     $("#list").empty(); 
     if ((data)["prev_list"]) { 
      $.each((data)["prev_list"], function(i, val) { 
       $("#list").append(val); 
      }); 
      $("#edit").hide("slow"); 
     } else { 
      $("#list").append("<tr><td colspan=11>&nbsp;</td></tr>");      
     } 
    }); 
}; 

、私はテーブルの行の内容を編集し終えたとき、私は同様の機能を起動しますが、行の.doneに私はprev_update関数を呼び出すと、これは私が更新されたテーブルの内容のボタンをプッシュする必要が終了した後、審査のための修正が... はここのコードです：

$("#prev_mod").on("click",(function(event) { 
    $('#loading_img').css('display','inline'); 
    header_print(); 
    $.ajax({ 
     type  : 'POST', 
     url  : 'json/post.php?mod='+$('#prev_id').val(), 
     data  : $("#form_sog").serialize(), 
     dataType : 'json', 
     encode : true 
    }) 
    .done(function(data) { 
     if ((data)["success"]===false) {  
      $('#form_edit').hide('slow'); 
      prev_update(); 
      $('#edit_'+$('#prev_id').val()).click(); 
     }); 
    }); 
})); 

私はprev_update（）関数が終了したとき、その後ので、ボタンをクリック待たなければなりませんボタンは更新中のテーブルにあります。 遅延オブジェクトも使用しようとしましたが、動作しません（おそらく私のエラーです）。 関数prev_updateは他の関数で使用されているため編集できません。

Answer 1

.doneの代わりに.thenを使用してコードを整理できます。これは.thenは

を連鎖させることができますので、テストされていませんが、それはあなたがprev_update()の内側にすべてが行われたときに知りたい場合は、非同期を追跡するために、それを変更する必要があり、この

function prev_update(cli_id){ 
    $("#list").empty(); 
    $("#list").append("<tr><td colspan=11><img src='images/loading.gif' alt=loading title=loading /></td></tr>"); 
    $.ajax({ 
     type  : 'POST', 
     url   : 'json/get.php?t=2&id='+cli_id, 
     dataType : 'json', 
     encode  : true 
    }) 
    .then(function(data) { 
     $("#list").empty(); 
     // rest of code 
    }).then(function(data) { 
     if ((data)["success"]===false) {  
      // rest of code 
     }; 
    }); 

Answer 2

のようにすることができますその中の操作と約束を返すことができます。次に、呼び出し元は、返された約束を使用して、何が完了したかを知ることができます。

したがって、prev_update()の内部では、2つの非同期操作がajax呼び出しと.hide()アニメーションです。 hideアニメーションは、ajax操作の完了ハンドラの内部で発生します。したがって、.done()を.then()に変更すると、これらの約束をまとめて、すべてが完了したときに発信者に通知する単一の約束を返すことができます。

jQueryには、すべてのjQueryアニメーションにリンクされている約束を得るための.promise()メソッドがあります。そのため、アニメーションの約束を得るだけで、返すことができ、親の約束につながります。アニメーションがなければ、何も返さずに約束を続けます。

これはprev_update()の機能を全く変更しません。以前は何も返さなかったときに完了を追跡するという約束を返します。

function prev_update(cli_id){ 
    $("#list").empty(); 
    $("#list").append("<tr><td colspan=11><img src='images/loading.gif' alt=loading title=loading /></td></tr>"); 
    return $.ajax({ 
     type  : 'POST', 
     url   : 'json/get.php?t=2&id='+cli_id, 
     dataType : 'json', 
     encode  : true 
    }).then(function(data) { 
     var p; 
     $("#list").empty(); 
     if ((data)["prev_list"]) { 
      $.each((data)["prev_list"], function(i, val) { 
       $("#list").append(val); 
      }); 
      p = $("#edit").hide("slow").promise(); 
     } else { 
      $("#list").append("<tr><td colspan=11>&nbsp;</td></tr>");      
     } 
     // return promise if there was one 
     return p; 
    }); 
}; 

だから、あなたはこのようなあなたの他のコードでこれを使用することができます：このように動作することができます

$("#prev_mod").on("click",(function(event) { 
    $('#loading_img').css('display','inline'); 
    header_print(); 
    $.ajax({ 
     type  : 'POST', 
     url  : 'json/post.php?mod='+$('#prev_id').val(), 
     data  : $("#form_sog").serialize(), 
     dataType : 'json', 
     encode : true 
    }).then(function(data) { 
     if ((data)["success"]===false) {  
      $('#form_edit').hide('slow'); 
      prev_update().then(function() { 
       // apply click when everything in prev_update() is done 
       $('#edit_'+$('#prev_id').val()).click(); 
      }); 
     }); 
    }); 
}));