自定义事件中的JavaScript延迟

在jQuery插件“jQuery步骤”的

onStepChanging

事件中使用延迟时，我在等待延迟完成时遇到问题。此插件记录在。该步骤立即返回，而不是等待延迟。在我的实际代码中，我正在进行一个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();
}

---

非常感谢您的帮助

步骤立即运行而不等待您的延迟，因为$。当异步运行并且在脚本中，您将返回状态，用于$。当回调时，不用于步骤更改

我的建议是，默认情况下，您需要返回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;
}

onStepChanging:函数（事件、当前索引、新索引）{
$.when（asyncEvent（））.then（函数（状态）{
如果（状态）
{
如果（当前索引<新索引）
{
表.子项（“div”）.步骤（“下一步”）；
}
其他的
{
表.子项（“div”）.步骤（“先前”）；
}
}
});
返回false；
}

---

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

您的代码希望异步函数同步返回，但这不起作用。以下是一种替代方法，该方法将禁用更改步骤，直到承诺完成：

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

，因为

的目的是操纵状态。因此，它将改为：

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

ajax是否太复杂而无法使用？能否提供相关标记的片段？ajax是否太复杂而无法使用内置的异步功能？是的，它比仅仅指向URL更复杂。能否提供相关标记的一个片段？我不确定我能提供多少额外的标记来增加价值。我尝试了这一点，但它仍然立即进入下一步。这是一个很好的建议。我试了一下，有两个问题。首先，当返回false时，一个名为“error”的CSS类被添加到导航链接中。这可以通过编辑“error”CSS类轻松克服。我无法克服的第二个问题是，即使通过“next”方法更改步骤，它也会运行“OnStepChangeing”事件。这会导致一个无休止的循环。