我可以使用jquery延迟来顺序显示jquery ui对话框

Question

我正在尝试使用JQuery UI Dialog和JQuery延迟来顺序显示两个对话框。但是，似乎对第一个对话框立即执行对话框代码，然后出现第二个对话框。

我有这个JSFiddle代码段：

http://jsfiddle.net/clee/db5SX/179/

由于对话框的调用是同步的，我试图不可行吗？

代码在这里：

var deferred = new $ .Deferred（）;

function step1() {
    var d1 = new $.Deferred();
    var options = {
        modal: true,
        width: 400,
        title: "dialog 1",
        buttons: [
            {
                'text':'ok',
                'click': function () {
                    console.log('ok');
                    d1.resolve(true);
                    $(this).dialog('close');
                }
            },
            {
                'text':'cancel',
                'click': function () {
                    console.log('cancel');
                    d1.reject();
                    $(this).dialog('close');
                }
            }
        ]
    };

    $("#dialog").dialog(options);
    return d1.promise();
}

function step2() {
    var d1 = new $.Deferred();
    var options = {
        modal: true,
        width: 400,
        title: "dialog 2",
        buttons: [
            {
                'text':'ok',
                'click': function () {
                    console.log('ok');
                    d1.resolve(true);
                    $(this).dialog('close');
                }
            },
            {
                'text':'cancel',
                'click': function () {
                    console.log('cancel');
                    d1.reject();
                    $(this).dialog('close');
                }
            }
        ]
    };

    $("#dialog").dialog(options);
    return d1.promise();
}


deferred.then(function(){step1();}).then(function(){step2();});
var deferred = new $.Deferred();

function step1() {
    var d1 = new $.Deferred();
    var options = {
        modal: true,
        width: 400,
        title: "dialog 1",
        buttons: [
            {
                'text':'ok',
                'click': function () {
                    console.log('ok');
                    d1.resolve(true);
                    $(this).dialog('close');
                }
            },
            {
                'text':'cancel',
                'click': function () {
                    console.log('cancel');
                    d1.reject();
                    $(this).dialog('close');
                }
            }
        ]
    };

    $("#dialog").dialog(options);
    return d1.promise();
}

function step2() {
    var d1 = new $.Deferred();
    var options = {
        modal: true,
        width: 400,
        title: "dialog 2",
        buttons: [
            {
                'text':'ok',
                'click': function () {
                    console.log('ok');
                    d1.resolve(true);
                    $(this).dialog('close');
                }
            },
            {
                'text':'cancel',
                'click': function () {
                    console.log('cancel');
                    d1.reject();
                    $(this).dialog('close');
                }
            }
        ]
    };

    $("#dialog").dialog(options);
    return d1.promise();
}


deferred.then(function(){step1();}).then(function(){step2();});
deferred.resolve();