$.deferred 没有按预期工作答案

【问题标题】：$.deferred does not work as expected$.deferred 没有按预期工作
【发布时间】：2017-04-18 21:30:53
【问题描述】：

在某些按钮的单击事件中，我正在调用函数 a()，其中包含下面提到的 Ajax 调用，成功后我使用了$.Deferred。它在第一次单击按钮时工作得非常好，但是当我第二次、第三次、第四次……或第 n 次单击按钮时，它不能按预期工作（它根本没有进入确认功能）。我做错了什么。先感谢您。

$.ajax({
            type: "GET",
            url: "some url",
            data: {
                parameters
            },
            success: function (result) {
                 //result is an Array object. for example **result:Array[3]**, further expand result will be like this **result[0]:Array[19], result[1]:Array[39], result[2]:Array[15]**
                var defer = $.Deferred();

                function confirmation(result) {
                    if (result.length > 1) {

                $('#field' + questionID).append('<div id=dialog></div>');
                $("#dialog").append('<div id=grid></div>');

                $("#dialog").kendoDialog({
                    modal: true,
                    visible: false,
                    draggable: true,
                    closable: false,
                    title: "Please Select One Submission",
                    maxWidth: 500,
                    //maxHeight:300,
                    animation: {
                        open: {
                            effects: "slideIn:down fadeIn",
                            duration: 500
                        },
                        close: {
                            effects: "slide:up fadeOut",
                            duration: 500
                        }
                    },
                    actions: [
                        { text: 'OK', primary: true, action: onOK }
                    ]
                });

                $("#grid").kendoGrid({
                    dataSource: {
                       data: result,
                        schema: {
                            data: function (result) {
                                return $.map(result, function (item) {
                                    return $.map(item, function (innerData) {
                                        for (var i = 0; i < displayFields.length; i++) {
                                            if (displayFields[i] == innerData.FieldIDString) {
                                                return {
                                                    EntryGroupID: innerData.EntryGroupID,
                                                    FieldTextString: innerData.FieldTextString,
                                                    EntryValue: innerData.EntryValue
                                                }

                                            }
                                        }
                                    });

                                });
                            }
                        },
                        pageSize: 2,
                        group: { field: "EntryGroupID" }                           
                    },
                    filterable: {
                        mode: "row"
                    },
                    pageable: {
                        refresh: true,
                    },
                    noRecords: {
                        template: "No records to display"
                    },
                    groupable:false,
                    //scrollable: true,
                    selectable: true,
                    columns: [{
                        field: "EntryGroupID",
                        title: "Submissions",
                        filterable: {
                            cell: {
                                operator: "contains"
                            }
                        }
                    }, {
                        field: "FieldTextString",
                        title: "Questions",
                        filterable: {
                            cell: {
                                operator: "contains"
                            }
                        }
                    }, {
                        field: "EntryValue",
                        title: "Answers",
                        filterable: {
                            cell: {
                                operator: "contains"
                            }
                        }
                    }]
                });

                var wnd = $("#dialog").data("kendoDialog");
                wnd.wrapper.find('.k-dialog-title').css('background', CIMSFields.backgroundColour).css('color', CIMSFields.textColour).css('width','100%').css('text-align','center');
                wnd.open().center(true);

                //in this function i'm waiting for user response which they will choose one array object based on this value **Confirmation** function will get the data.
                function onOK(e) {
                    var data = [];
                    var grid = $("#grid").data("kendoGrid");
                    var selectedItem = grid.dataItem(grid.select());
                    if (selectedItem != null) {
                        $.map(result, function (item) {
                            if (selectedItem.EntryGroupID == item[0].EntryGroupID) {
                                data.push(item);
                                defer.resolve(data);
                            }
                        });
                    }
                    else {
                        defer.resolve(data);
                    }
                    wnd.close();
                }
            }
            else
            {
                defer.resolve(result);
            }
            return defer.promise();
       }        
       alert(defer.state());        
       confirmation(result).then(function (data) {
          //it never reach here except first time
             alert(defer.state());                        
             alert(data);// data is the user selected value from the grid.                        
          })
      }
});

【问题讨论】：

您是否在第 n 次检查 Ajax 调用时是否出现错误？将错误处理程序添加到您的 ajax 调用以查看。除了延迟的反模式（当$.ajax() 已经返回一个时创建一个新的延迟，我在您显示的代码中看不到任何会导致您描述的行为的内容。
仅供参考，$.ajax() 已经返回了一个承诺，因此您可以执行 $.ajax().then(...).then(...)。
你为什么用result.length > 1，然后!data.empty？ !data.empty 的预期结果是什么？ data 是数组吗？
if..else 的用途是什么，.resolve() 在每个块中都被调用？
是的数据是一个数组的对象。例如数据[0]->数组[39]。我正在检查结果的长度，如果有多个数组对象，结果将填充到网格中，否则它只是将一个对象返回到确认函数，我正在检查数据是否为空。希望这对你有意义。

标签： javascript jquery jquery-deferred

【解决方案1】：

如果result 是一个数组，则.empty 不是Array 属性或方法。 $.Deferred() 不是必须的，$.ajax() 返回一个 jQuery 承诺对象。

您可以检查预期数组的.length，或链接到a() 调用的.then() 预期对象的属性。此外，链接.fail() 以记录和处理可能发生的错误。

function a(/* parameters */) {
  // note, we are `return` ing `jQuery.ajax()` call,
  // which returns a jQuery promise object
  return $.ajax({type: "GET", url: "some url", data: {parameters}})

}

a()
.then(function(result, textStatus, jqxhr) {
  console.log(result.length, jqxhr.state());
  if (result.hasOwnProperty("empty")) { console.log(result.empty); }
  else { console.log("result does not have property \"empty\""); };
})
// log, handle errors here
.fail(function(jqxhr, textStatus, errorThrown) {
  console.log(textStatus, errorThrown, jqxhr.state());
});

【讨论】：

您对.empty 的看法是正确的。我会尝试您的解决方案并让您知道。感谢您的回复。
我已经编辑了我的问题，请看一下。可能会帮助您了解导致我在顶部描述的行为。

【解决方案2】：

found my answer here

基本上我的需要是在继续之前我必须等待函数中的用户响应。谢谢大家花时间回答我的问题。我感谢您的时间和精力。最重要的是我现在根本没有使用deferred。

【讨论】：