Javascript 如何让另一个函数解析jquery延迟函数编程

我只是JS的初学者，正在开发前端。我制作了一些工作代码，但这给了我一段很难维护和扩展的时间。我想尽可能多地转向函数式编程，但我不知道如何处理我的延迟

工作代码创建一个模式，请求两个参数，然后继续使用参数，或者关闭模式，不继续：

var defer = $.Deferred();

var modal = {
    class: 'modal-box',
    title: 'Action required',
    message: 'Please specify where to split:',
    choices: [{modePK: 0, mode: 'All', checked: true},
              {modePK: 1, mode: 'Right-most'},
             ]

    };

$('body').append($('<div id="overlay_visible">'));
$('body').append($(Mustache.render($("#modal-delimiter-template").html(), modal)));

$('body').on('click', '#delimiter-submit', function () {
    defer.resolve(true, $(this));
});

$('body').on('click', '#deny-forms', function () {
    defer.resolve(false, $(this));
});

defer.done(function (cancelled, caller) {
    if (!cancelled) { *do fancy stuff with the choice*} else { *close the modal*} });

在本例中，延迟在两个函数中解决，我手动将这两个函数归因于模式中的两个按钮。现在我想谈谈这样的事情：

function buttonAccept() {
   $('body').on('click', '#delimiter-submit', function () {
        defer.resolve(true, $(this)); <- THIS ISN'T DEFINED
   });
}

function buttonCancel() {
    $('body').on('click', '#deny-forms', function () {
        defer.resolve(false, $(this));  <- THIS ISN'T DEFINED
   });
}

function showModal(modal, template, ...buttonFunctions) {
    var defer = $.Deferred();
    $('body').append($(Mustache.render($(template).html(), modal)));
    buttonFunctions.apply(this) <--- THIS IS WHERE I AM STUCK
    }

function askUserDelimiterMode () {

    var modal = {
        class: 'modal-box',
        title: 'Action required',
        message: 'Please specify where to split:',
        choices: [{modePK: 0, mode: 'All', checked: true},
                  {modePK: 1, mode: 'Right-most'},
                 ]

        };

    var template = "#modal-delimiter-template"

    return showModal(modal, template, buttonAccept, buttonCancel)
};

askUserDelimiterMode().then(*do fancy stuff with the choice*);

---

第二个代码已经更清晰了，我可以重用它，但是我不知道如何将延迟传递给ButtonFunction。按钮功能使用。。。运算符，因为我可能需要在前端使用任意数量的具有不同效果的按钮。我是这方面的绝对初学者，我很乐意朝着正确的方向努力。

只是当它们属于一个整体时，不要把它们放在不同的功能中。当然，您可以简单地将延迟对象作为参数传递给它们，但这是一种糟糕的做法——异步函数应该自己创建、解析和返回它们的承诺

function showModal(modal, template, ...buttons) {
    const defer = $.Deferred();
    $('body').append($(Mustache.render($(template).html(), modal)));
    for (const [i, selector] of buttons.entries()) {
        $('body').on('click', selector, function() {
            defer.resolve(i, $(this));
        });
    }
    return defer.promise();
}
function askUserDelimiterMode () {
    var modal = {
        class: 'modal-box',
        title: 'Action required',
        message: 'Please specify where to split:',
        choices: [
            {modePK: 0, mode: 'All', checked: true},
            {modePK: 1, mode: 'Right-most'},
        ]
    };
    return showModal(modal, '#modal-delimiter-template', '#deny-forms', '#delimiter-submit');
}

askUserDelimiterMode().then(/*do fancy stuff with the choice*/);

---

为什么不把defer变量传递给buttonFunctions呢？buttonFunctions是一个数组，它没有apply方法。这种方法无论如何都不起作用。请注意，这与函数式编程无关，它仍然是必需的。但是，通过在函数中加入公共内容来实现模块化是一个良好的开端。