有谁能告诉我这个自定义javascript函数如何执行？

Question

点击“取消”按钮＆＃39; ，我没有得到返回$ .Deferred对象。 我很困惑。点击＆＃34;取消按钮＆＃34; ，我将获得$ .Deferred对象和$ .Deferred

// javascript代码

var str_confirmDialog = [
'<div class="tanChuang3" style="display: block;">',
'<div class="oh pa table">',
    '<div class="table-cell">',
        '<div class="bg-fff pr">',
            '<p class="tl"><strong>{title}</strong></p>',
            '<p class="tableCellTxt">{msg}</p>',
            '<p class="tr">',
                '<a href="javascript:;" class="_cancel">cancel</a>',
                '<a href="javascript:;" id="close" class="_next">OK</a>',
            '</p>',
        '</div>',
    '</div>',
    '<i class="close pa c-close-btn"></i>',
'</div>',
'<div class="tanChuangBg"></div>',
'</div>'].join('');
Hnb.ui = {

showConfirm: function(title , msg , sleep) {
            var defer = $.Deferred();
            var str_message = str_confirmDialog.replace('{title}' , title);
            var str_message = str_message.replace('{msg}' , msg);
            var $box = $(str_message).appendTo("body");

            $box.find(".c-close-btn").click(function() {
                $(this).unbind('click');
                $box.remove();
                defer.resolve();
            });

            // cancel button
            $box.find("._cancel").click(function(){
                $(this).unbind("click");
                $box.remove();
                // //If I do not comment this paragraph, it will be fine to execute always.
                //return defer.reject();
            }); 
            // next button
            $box.find("._next").click(function() {
                $(this).unbind("click");
                $box.remove();
                defer.resolve();
            });

            if(sleep) {
                setTimeout(function() {
                    $box.find('.c-close-btn').trigger('click');
                } , sleep);
            }
            return defer;
        }
}

//调用函数，单击取消按钮后，我没有得到$ .Deferred对象。

Hnb.ui.showConfirm('title' , 'msg' , 3000).done(function(){
   alert('done');
}).always(function() {
   alert('always');
});

Answer 1

如果您想在点击取消时拒绝承诺，则不会返回，只需拨打reject（就像所有其他点击处理程序一样致电< / em> reject或resolve）：

// cancel button
$box.find("._cancel").click(function(){
    $(this).unbind("click");
    $box.remove();
    defer.reject(); // <== No return
}); 

另请注意，在调用它时，您告诉它在三秒后自动确认：

Hnb.ui.showConfirm('title', 'msg', 3000)
// Here ---------------------------^

这是一个实例，我已经完成了上面的defer.reject()并注释掉了自动关闭;工作得很好：

var Hnb = {}; // Added
var str_confirmDialog = [
  '<div class="tanChuang3" style="display: block;">',
  '<div class="oh pa table">',
  '<div class="table-cell">',
  '<div class="bg-fff pr">',
  '<p class="tl"><strong>{title}</strong></p>',
  '<p class="tableCellTxt">{msg}</p>',
  '<p class="tr">',
  '<a href="javascript:;" class="_cancel">cancel</a>',
  '<a href="javascript:;" id="close" class="_next">OK</a>',
  '</p>',
  '</div>',
  '</div>',
  '<i class="close pa c-close-btn"></i>',
  '</div>',
  '<div class="tanChuangBg"></div>',
  '</div>'
].join('');
Hnb.ui = {

  showConfirm: function(title, msg, sleep) {
    var defer = $.Deferred();
    var str_message = str_confirmDialog.replace('{title}', title);
    var str_message = str_message.replace('{msg}', msg);
    var $box = $(str_message).appendTo("body");

    $box.find(".c-close-btn").click(function() {
      $(this).unbind('click');
      $box.remove();
      defer.resolve();
    });

    // cancel button
    $box.find("._cancel").click(function() {
      $(this).unbind("click");
      $box.remove();
      defer.reject();
    });
    // next button
    $box.find("._next").click(function() {
      $(this).unbind("click");
      $box.remove();
      defer.resolve();
    });

    if (sleep) {
      setTimeout(function() {
        $box.find('.c-close-btn').trigger('click');
      }, sleep);
    }
    return defer;
  }
};

Hnb.ui.showConfirm('title', 'msg'/*, 3000*/).done(function() {
  $('<p>').text('done').appendTo(document.body);
}).always(function() {
  $('<p>').text('always').appendTo(document.body);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

附注：您不应该从Deferred返回showConfirm对象;你应该返回承诺：

return defer.promise();

这样，只有您的代码可以解析或拒绝它。如果您返回Deferred，则您将其传回的代码也可以解析或拒绝它。