Question

如果有人可以帮助我或指出我正确的方向，我会很高兴。我尝试使用jQuery创建一个应该显示一个模态链的函数，在按下确认按钮后依次显示。它不起作用，我必须做一些基本的错误。我对JS函数不太熟悉。

这是主要功能：

$(function () {
    fn1 = show_modal("#modal_1","#overlay_1","#modal_confirm_1")
    fn2 = show_modal("#modal_2","#overlay_2","#modal_confirm_2")

    fn1().done(fn2);
});

这是我在另一个文件中的show_modal函数：

var show_modal = function (modal, overlay, input_id) {
    let deferred = $.Deferred();

    $(modal).add($(overlay)).fadeIn("fast", function () {
      });

    $(input_id).click(function () {
        $(modal).add($(overlay)).hide();
        deferred.resolve();
    });

    return deferred.promise();
};

非常感谢您的帮助。

Answer 1

经过另一天的尝试，我得到了它。我在这里发布我的结果，以便其他人可以从中受益。命名函数是以一种糟糕的方式完成的，它们是立即运行的，但我想要一种顺序的异步行为。

我能够使用以下代码构建一个函数队列（一个接一个地运行）：

$(function () {

    var show_modal_1 = show_modal_scaffold("#modal_1","#overlay_1","#modal_confirm_1");
    var show_modal_2 = show_modal_scaffold("#modal_2","#overlay_2","#modal_confirm_2");
    var show_modal_3 = show_modal_scaffold("#modal_3","#overlay_3","#modal_confirm_3");

    var tutorial = [show_modal_1,show_modal_2,show_modal_3];

    var q = $.Deferred().resolve();
      while (tutorial.length > 0) {
      q = q.then(tutorial.shift());
    };

});

show_modal函数的脚手架必须稍微更改一下，如下所示：

show_modal_scaffold = function (arg1,arg2,arg3) {
    return function (modal=arg1, overlay=arg2, input_id=arg3) {
        let deferred = $.Deferred();

        $(modal).add($(overlay)).fadeIn("fast", function () {
        });

        $(input_id).click(function () {
            $(modal).add($(overlay)).hide();
            deferred.resolve();

        });
        return deferred.promise();
    };
};

这是我能想到的最简单的语法。由于我不熟悉JavaScript，我无法判断它是否是最好的方法。

仅在jQuery中完成其他函数后运行函数（HTML模态）

1 个答案: