我需要等到我所有的ajax函数都完成后,再继续执行。
我的特殊情况是,在提交表单之前,我需要翻译表单中的某些字段。我通过ajax调用将其转换为外部站点。根据表单中的某些值,我需要进行更多或更少的翻译。完成所有翻译后(如果有),我必须使用ajax验证表单,如果表单有效,则提交。
这是我的方法: 首先,我有一个函数发送ajax调用并对接收到的数据进行处理:
function translate(...) { $("#ajaxCounter").val(parseInt($("#ajaxCounter").val()) + 1); $.ajax({ ... success:function(data) { ... $("#ajacCounter").val(parseInt($("#ajaxCounter").val()) - 1); } });
然后,当要提交表单时,我将执行以下代码:
$("#form").submit(function() { translatable_fields.each(function() { translate(...); }); while (parseInt($("#ajaxCounter").val()) > 0) { null; } if (!(this).hasClass('ready')) { $.ajax({ //validation success: function(data) { if (data['isValid']) { $("#form").addClass('ready'); $("#form").submit(); } } }); } return true; });
问题在于whilesubmit函数中的循环永远不会结束。
while
如果我执行的代码没有while循环,我可以看到ajaxCounter输入在转换函数开始时增加而在转换函数结束时减少。
ajaxCounter
您可以使用调用deferred返回的对象以更加整洁的方式实现此目的$.ajax。首先,您应该获得translate()返回以下内容的函数deferred:
deferred
$.ajax
translate()
function translate(...){ return $.ajax({ // settings... }); });
然后,您可以将所有这些承诺放入一个数组中:
var requests = []; translatable_fields.each(function(){ requests.push(translate(...)); });
然后,您可以apply将该数组添加到$.when:
apply
$.when
$.when.apply($, requests).done(function(schemas) { console.log("All requests complete"); // do something... });