Question

在jQuery插件＆＃34; jQuery-Steps＆＃34;中使用onStepChanging事件中的延迟时，我在等待延迟完成时遇到问题。此插件记录在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();
}

非常感谢任何帮助！

Answer 1

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

$(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();
}

在这种情况下，最好直接在返回的promise上使用done，因为then的目的是操纵状态。所以，它会改为：

onStepChanging: function(event, currentIndex, newIndex) {
    asyncEvent().done(function(status) {
        stepReady = status;
    });
    return stepReady;
}

Answer 2

该步骤无需等待延迟即可立即运行，因为 $。时以异步方式运行，而在您的脚本中，您将返回 $。状态 $。 strong>回调不适用于 onStepChanging 。

我的建议是，您默认需要返回错误 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手动改变步骤..希望有所帮助..

JavaScript在自定义事件中延迟

2 个答案: