如何让另一个函数解决jquery延迟，函数式编程答案

【问题标题】：How to let another function resolve a jquery deferred, functional programming如何让另一个函数解决jquery延迟，函数式编程
【发布时间】：2018-02-05 21:33:54
【问题描述】：

我只是 JS 的初学者并从事前端工作。我编写了一些工作代码，但它让我很难维护和扩展它。我想尽可能多地转向函数式编程，但我不知道如何处理我的延迟。

工作代码（制作一个模态，要求 2 个参数，然后继续使用参数，或者关闭模态而不继续前进）：

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*);

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

【问题讨论】：

为什么不将 defer 变量传递给 buttonFunctions？
buttonFunctions 是一个数组，它没有 apply 方法。这种方法无论如何都行不通。
请注意，这与函数式编程无关，它仍然是必要的。但是，是的，通过将通用的东西放在函数中进行模块化是一个好的开始。

标签： javascript jquery promise jquery-deferred

【解决方案1】：

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

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*/);

【讨论】：