jQuery Deferred then() 在解决之前调用

Question

我是 jQuery Deferred 的新手，不明白为什么在成功函数完成之前调用 then。我有两个同时的 ajax 请求，并希望触发 UI 单选按钮单击以迭代从其中一个 ajax 调用返回的一些数据，这需要 20 秒才能响应。但是，当在 then() 中触发单选按钮单击时，要迭代的数据为空。如果我单击不同的单选按钮来过滤数据，然后单击触发的单选按钮，则数据不为空，因为已经过了足够的时间来成功加载对象。

对象在第一个（20 秒）ajax 调用成功加载，然后在 then() 中触发点击，当这两个调用都解决时。为什么 then() 还没有成功触发点击？

    firstAjaxFunc: function(args){          
        return $.ajax({
            type: "POST",               
            url: REQUEST_URL + "/first-func",
            contentType: "application/json",
            data: $.toJSON({
                propOne: propOne,
                propTwo: propTwo
            }),
            dataType: "json class.models",
            context: args.context,
            success: args.success,
            error: showResponseError
        });
    },

    secondAjaxFunc: function(args){
        return $.ajax({
            type: "POST",               
            url: REQUEST_URL + "/second-func",
            contentType: "application/json",
            data: $.toJSON({
                propOne: propOne,
                propTwo: propTwo
            }),
            dataType: "json class.models",
            context: args.context,
            success: args.success,
            error: showResponseError
        });
    },

        $('#load-data').append('<p class="spinner" align="center"><img src="../images/loading_small.gif"/></p>');
        this.firstAjaxFunc({
            params: {
                propOne: propOne,
                propTwo: propTwo
            },
            success: function(data){
                this.options.stuff = data;
            },
            context: this
        });
        this.secondAjaxFunc({
            params: {
                propOne: propOne,
                propTwo: propTwo
            },
            success: function(data){
                this.options.moreStuff = data;
            },
            context: this
        });
        $.when(firstAjaxFunc, secondAjaxFunc).then(this.find(".filter-all").click());

    ".filter-all click": function(radio, event){ 
            this.showAllData();
    },

    showAllData: function(){
        for(var i = 0; i < this.options.stuff.length; i++){ // this.options.stuff is null
            $.merge(stuffArr, this.options.stuff[i].getMyStuff());
        }
    },

Answer 1

我看到两个主要问题。

$.when() 接受 Promise 作为参数，而不是回调函数。因此，您需要像这样实际调用传递给它的函数：

 $.when(this.firstAjaxFunc(...), this.secondAjaxFunc(...)).then(...);

并且，.then() 处理程序必须是回调函数，因此您必须将 .then() 处理程序转换为可以稍后调用的回调函数。正如您现在所拥有的那样，它会立即执行并将其结果传递给.then()，这就解释了为什么.click() 会立即执行。

---

此外，最好不要将 jQuery 成功处理程序与承诺处理程序混用。选择其中一个并始终如一地使用它们。在这种情况下，由于您需要一些 Promise 功能，您可能应该只使用 Promise，因为 Promise 处理程序的调用顺序和序列在 Promise 规范中进行了严格描述，因此调用顺序不会有歧义。

---

您只显示代码片段，因此很难获得完整的上下文，但我认为您想要这样的东西：

    var p1 = this.firstAjaxFunc({
        params: {
            propOne: propOne,
            propTwo: propTwo
        },
        success: function(data){
            this.options.stuff = data;
        },
        context: this
    });
    var p2 = this.secondAjaxFunc({
        params: {
            propOne: propOne,
            propTwo: propTwo
        },
        success: function(data){
            this.options.moreStuff = data;
        },
        context: this
    });
    $.when(p1, p2).then(function() {
        this.find(".filter-all").click();
    }, showResponseError);

---

或者，将所有内容都转换为承诺：

    var self = this;
    var p1 = this.firstAjaxFunc({
        params: {
            propOne: propOne,
            propTwo: propTwo
        }
    });
    var p2 = this.secondAjaxFunc({
        params: {
            propOne: propOne,
            propTwo: propTwo
        }
    });
    $.when(p1, p2).then(function(data1, data2) {
        // process the results
        self.options.stuff = data1[0];
        self.options.moreStuff = data2[0];

        // carry out action now that both are done
        this.find(".filter-all").click();
    }, showResponseError);