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

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，我无法判断它是否是最好的方法。