在自定义事件中延迟的JavaScript

Question

当在jQuery插件"jQuery-Steps“上的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

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

$(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

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

我的建议是，您需要默认返回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并手动进行步骤更改。希望它能帮上忙。