JavaScript 在自定义事件中延迟

JavaScript Deferred in Custom Event

本文关键字：延迟 事件 自定义 JavaScript      更新时间：2023-09-26

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

任何帮助将不胜感激！

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

$(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，因为then的目的是操纵状态。因此，它将更改为： 

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

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

我的建议，默认情况下，您需要返回错误的onStepChange事件，并手动进行步骤更改。

可能是这样的

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 并手动进行步骤更改。.希望有帮助..

相关文章：