jQuery deferrend;等待函数的回调

时间:2015-01-15 17:08:13

标签: javascript jquery deferred

在完成其中一个功能之前,我必须使用AJAX请求调用3个函数。所有函数都需要相同的数据,所以我只想启动一次AJAX请求。我认为我需要一个功能来调用3个函数中的2个来等待并在最后提供数据。也许问题是我是jQuery Deferred的新手并且没有找到一些基本的东西?谢谢你的帮助!

因为我的脚本是复杂的例子所以我创建了这个演示:(我希望它是自我解释的)

<script>
    var requestRunning = false;

    //do some ajax request etc...
    function doSomething() {
        return {
            doIt: function (test, startDelay) {
                var dfd = $.Deferred();

                setTimeout(function () {
                    if (requestRunning == false) {
                        console.log("starting ajax call:", test);

                        requestRunning = true;

                        //Fake ajax call
                        setTimeout(function () {
                            dfd.resolve(test);
                            // Todo: A done; provide data to waiting B and C.
                        }, 500);
                    }
                    else {
                        console.log("ajax call allready running, waiting...", test);
                    }
                }, startDelay);

                return dfd.promise();
            }
        }
    }

    // Fake delay for function calls in really short time
    var master = doSomething();
    var a = master.doIt("a", 10);
    var b = master.doIt("b", 15);
    var c = master.doIt("c", 12);

    // Do some stuff with the received data...
    a.done(function myfunction(result) {
        console.log(result + " done");
    });

    b.done(function myfunction(result) {
        console.log(result + " done");
    });

    c.done(function myfunction(result) {
        console.log(result + " done");
    });
</script>

1 个答案:

答案 0 :(得分:1)

我不完全确定你要做什么,但如果你想要做的是立即启动三个ajax调用然后知道所有这些调用何时完成,因为jQuery ajax调用已经返回承诺,你可以使用这个承诺和$.when()这样:

var p1 = $.ajax(...);
var p2 = $.ajax(...);
var p3 = $.ajax(...);

$.when(p1, p2, p3).then(function(r1, r2, r3) {
    // results of the three ajax calls in r1[0], r2[0] and r3[0]
});

或者,您甚至可以在没有中间变量的情况下执行此操作:

$.when(
    $.ajax(...),
    $.ajax(...),
    $.ajax(...)
).then(function(r1, r2, r3) {
    // results of the three ajax calls in r1[0], r2[0] and r3[0]
});

如果您正在调用自己执行ajax调用的函数,那么您可以从这些函数返回ajax promise并使用上述结构的函数调用:

function doSomethingAjax() {
    // some code
    return $.ajax(...).then(...);
}

$.when(
    doSomethingAjax1(...),
    doSomethingAjax2(...),
    doSomethingAjax3(...)
).then(function(r1, r2, r3) {
    // results of the three ajax calls in r1[0], r2[0] and r3[0]
});