Question

我试图基于Boostrap构建一类自定义警报。一切都还很年轻，但我遇到了一个问题。如果单击事件发生，如何根据单击的按钮返回值？在这里你可以看到我如何设置值（非常容易，测试）

    $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;
    });

这是我的课程和测试代码JSFiddle

如您所见，警告（显然）出现在模态显示之前。我该怎么处理？如何等待返回正确的值，然后提醒它？

Answer 1

问题是这些回调函数是异步调用的，之后的return语句返回的值不可用。以下构造仅在整个过程同步时才有效：

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

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

此方案非常适合引入承诺。这就是你这样做的样子：

首先更改showModal函数以返回承诺：

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将返回一个promise对象，该对象公开了一个then方法，您传递了一个回调：

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

......就是这样。

以下是更新后的fiddle。

从类函数返回值

1 个答案: