为什么我使用 Deferred 的 jQuery 对话框不等待用户选择？

Question

我有以下函数创建一个对话框并使用 jQuery deferred 来等待用户响应：

function myPageUnsaved() {
    var defer = $.Deferred();
    $('<div></div>')
    .html('You have unsaved changes. Leave this page and lose your changes?')
    .dialog({
        autoOpen: true,
        modal: true,
        title: 'Confirmation',
        buttons: {
            "No": function () {
                defer.resolve("false");
                $(this).dialog("close");
             },
             "Yes": function () {
                defer.resolve("true");
                $(this).dialog("close");
             }
        },
        close: function () {
            $(this).dialog('destroy').remove();
        }
    });
    return defer.promise();
}

我在下面的js中调用函数：

// function to check for user changes prior to navigating to a new page
function checkPageChange() {
    if (pageChanges == true) {
        myPageUnsaved().then(function (answer) {
            // if user answered no, stay on the page
            if(answer == 'false') {
                return false;
            // else the user answered yes, so leave the page
            } else {
                return true;
            }
        });

    } else {
        return true;
    }
}   

我正在运行 jQuery 1.11。

对话框呈现给用户，但立即被删除。我错过了什么？

Answer 1

使用的模式似乎是正确的，我最初的答案是不正确的。 .promise 是一种 deferred 方法，所有成员方法都可以在这里看到。 http://api.jquery.com/category/deferred-object/

原始海报提供的代码示例似乎可以在 jsfiddle 中使用

https://jsfiddle.net/n7ewqfc0/

---

初步答案 - 错误假设

您是否尝试过只返回 defer 而不是 defer.promise();这对我来说似乎不对。

查看Deferred 的规范，没有提到promise 方法。 https://api.jquery.com/jquery.deferred/

显然，我已经大大简化了您的代码以提供解决 Promise，但原理是相同的。您必须返回承诺对象，即 Deferred 才能使用基于承诺的回调 .then 等。

function myPageUnsaved() {
    var defer = $.Deferred();
    setTimeout(function(){
        defer.resolve('hey back from inside the promise')
    }, 2000)
    return defer;
}

var p = myPageUnsaved()
p.then(function(response){
  console.log(response)
})