1

onStepChanging在 jQuery 插件“jQuery-Steps”的事件中使用 deferred 时，我在等待 deferred 完成时遇到问题。该插件记录在http://www.jquery-steps.com/。该步骤立即返回，而不是等待延迟。在我的真实代码中，我正在执行 ajax 调用，我想在继续下一步之前等待结果。

这是一些示例代码：

$(document).ready(function() {
    var form = $("#form1");
    form.children("div").steps({
        headerTag: "h3",
        bodyTag: "section",
        transitionEffect: "slideLeft",
        onStepChanging: function(event, currentIndex, newIndex) {
            $.when(asyncEvent()).then(function(status) {
                return status;
            });
        }
    });
});

function asyncEvent() {
    var dfd = new $.Deferred();

    setTimeout(function() {
        dfd.resolve(true);
    }, 2000);

    return dfd.promise();
}

任何帮助是极大的赞赏！

4

2 回答 2

2

您的代码期望异步函数同步返回，这将不起作用。这是一种替代方法，它将在承诺完成之前禁用更改步骤：

$(document).ready(function() {
    var form = $("#form1");
    // initialize the return value as false (since you want to wait for your promise to complete)
    var stepReady = false;
    form.children("div").steps({
        headerTag: "h3",
        bodyTag: "section",
        transitionEffect: "slideLeft",
        onStepChanging: function(event, currentIndex, newIndex) {
            $.when(asyncEvent()).then(function(status) {
                stepReady = status;
            });
            return stepReady;
        }
    });
});

function asyncEvent() {
    var dfd = new $.Deferred();

    setTimeout(function() {
        dfd.resolve(true);
    }, 2000);

    return dfd.promise();
}

在这种情况下，最好done直接在返回的 Promise 上使用，因为 的目的then是操纵状态。因此，它将更改为：

onStepChanging: function(event, currentIndex, newIndex) {
    asyncEvent().done(function(status) {
        stepReady = status;
    });
    return stepReady;
}
于 2015-01-17T00:39:27.453 回答
0

该步骤立即运行而无需等待您的延迟，因为$.when是异步运行的，并且在您的脚本中，您将返回$ .when回调的状态而不是onStepChanging。

我的建议，你需要默认返回 false你的onStepChanging事件，并手动进行步骤更改..

可能是这样的

onStepChanging: function(event, currentIndex, newIndex) {
    $.when(asyncEvent()).then(function(status) {
        if(status)
        {
            if (currentIndex < newIndex)
            {
                form.children("div").steps('next');
            }
            else
            {
                form.children("div").steps('previous');
            }
        }
    });

    return false;
}

抱歉，如果我写了一些错误，我没有很好地测试这段代码，我只是阅读了http://www.jquery-steps.com/Examples上的示例并尝试了解它是如何工作的，但主要思想只是返回 false默认情况下并手动进行步骤更改..希望对您有所帮助..

于 2015-01-17T00:37:30.807 回答