Return 来自 class 函数的值

Question

我正在尝试基于 Boostrap 构建 class 自定义警报。一切都还很年轻，但我遇到了一个问题。怎么才能return只在click事件发生的时候才根据被点击的按钮取一个值呢？在这里你可以看到我是如何设置值的（非常简单，用于测试）

    $modal.on('click', '[data-alertify="cancel"]', function(){
        var value = 'no';
        $modal.modal('hide');
        return value;
    });
    $modal.on('click', '[data-alertify="confirm"]', function(){
        var value = 'yes';
        $modal.modal('hide');
        return value;
    });

这是我的class和测试代码JSFiddle

如您所见，警报（显然）出现在模式显示之前。我该如何处理？我怎样才能等待正确的值被 returned，然后提醒它？

Answer 1

问题在于这些回调函数是异步调用的，之后您无法使用其中的 return 语句编辑的值 return。以下构造仅在整个过程同步时才有效：

var ret = Alertify.alert({
   content: 'This is MY alert content!'
});

... 但是 Alertify.alert() 没有 return 所需的值，因为用户尚未单击。此 alert() 函数不会 return 任何东西，并且肯定不会 return 仍然必须发生的点击结果。

此场景非常适合引入承诺。这是你这样做时的样子：

首先将showModal函数改为return一个promise：

var showModal = function (alert_id) {
  $('body').append($html);
  var $modal = $('#' + alert_id);
  $modal.modal('show');
  var dfd = $.Deferred(); // create a promise
  $modal.on('click', '[data-alertify="cancel"]', function(){
    var value = 'no';
    $modal.modal('hide');
    dfd.resolve(value); // instead of returning the value, resolve the promise with it
  });
  $modal.on('click', '[data-alertify="confirm"]', function(){
    var value = 'yes';
    $modal.modal('hide');
    dfd.resolve(value);
  });
  $modal.on('hidden.bs.modal', function(){
    $(this).remove();
    dfd.resolve();
  });
  return dfd.promise(); // return the (unresolved) promise
};

现在 Alertify.alert 将 return 一个 promise 对象，它公开一个 then 方法，您将回调传递给该方法：

Alertify.alert({
  content: 'This is MY alert content!'
}).then(function(ret) {
   alert(ret);
});

...就是这样。

这是更新后的 fiddle。

Return 来自 class 函数的值

Return value from class function

jquery

class

control-flow