javascript – 在每个()函数内调用多个ajax ..然后在完成所有这些操作后再执行一些操作？

让我稍微解释一下我的代码(对不起,如果有些错误,我只是从头开始编写这个例子,它与我现在的非常接近).

HTML：

<form id="form">
    <!-- Friend 1 -->
    Name 1: <input type="text" name="friendName1" id="friendName1" class="friendName" value=""><br />
    Email 1: <input type="text" name="friendEmail1" id="friendEmail1" value=""><br /><br />
    <!-- Friend 2 -->
    Name 2:<input type="text" name="friendName2" id="friendName2" class="friendName" value=""><br />
    Email 2:<input type="text" name="friendEmail2" id="friendEmail2" value=""><br /><br />
    <!-- Friend 3 -->
    Name 3:<input type="text" name="friendName3" id="friendName3" class="friendName" value=""><br />
    Email 3:<input type="text" name="friendEmail3" id="friendEmail3" value=""><br /><br />
    <!-- Friend 4 -->
    Name 4:<input type="text" name="friendName4" id="friendName4" class="friendName" value=""><br />
    Email 4:<input type="text" name="friendEmail4" id="friendEmail4" value=""><br /><br />
    <!-- Submit -->
    <input name="submit" type="submit" value="Submit">
</form>

JS：

$("#form").submit(function(){

    $(".friendName[value!='']").each(function(){
        var idEmail = 'friendEmail' + $(this).attr("id").replace('friendName','');
        if($("#"+idEmail+"[value!='']").length > 0){
            var name = $(this).val();
            var email = $("#"+idEmail).val();

            // Submit the ajax request
            $.ajax({ 
                type: 'POST', 
                url: 'ajax/url', 
                data: {
                    name: name,
                    email: email
                },
                success: function(json) {
                    // Log a console entry if our ajax request was successful
                    console.log(name + " was submitted via ajax");
                }
            });
        }
    });

    // Redirect the user to the thank you page
    setTimeout( function() { window.location= '/thanks'; }, 2000 );

});

JSfiddle(重定向已删除,ajax调用替换为控制台日志,用于小提琴)

http://jsfiddle.net/cM5PX/

HTML是一个简单的表单,包含朋友姓名和朋友电子邮件输入字段.

JS有一个函数,如果名称和相关的电子邮件具有值,它将运行ajax调用.

我需要一种方法来运行这些ajax调用(可能有1个循环,可能有15个)然后在它们全部完成之后,重定向到新页面.

我正在做的当前方式是可怕的,因为所有的ajax调用都没有在页面重定向之前完成运行.

我该怎么做才能让这更好？它需要是万无一失的,并且只有在所有ajax调用完成后才会重定向(成功或错误,无关紧要 – 它只需要在完成后重定向).

我尝试过使用async：false但它似乎没有什么区别.

我已经考虑过在每个函数中放置一个计数器和ajax成功函数中的计数器,如果它们都匹配,那么进行重定向,但我正在寻找一些更有经验的指导.

解决方法:

使用deferred objects：

$("#form").submit(function(e){

    e.preventDefault();

    var calls = [];

    $(".friendName[value!='']").each(function(){
        // Submit the ajax request
        calls.push($.ajax({ 
            type: 'POST', 
            url: 'ajax/url', 
            data: {
                name: name,
                email: email
             },
             success: function(json) {
                // Log a console entry if our ajax request was successful
                console.log(name + " was submitted via ajax");
             }
         }));
    });

    $.when.apply($, calls).then(function() {
        window.location= '/thanks';
    });
});