单击执行 ajax 操作的按钮时附加回调

Question

我知道这可以通过 Promise 实现，但我正在努力弄清楚如何。

jQuery('.parentDiv').on('click', '.link', function(e) {
  jQuery.when(jQuery('.saveBtn').trigger('click', { 'evtData': 'link' })).then(function {
    // rest of the logic that should be performed on click of .link
  }); 
});

.saveBtn的点击调用了一个名为doAjax的函数：

jQuery('.saveBtn').on('click', function() {
  doAjax()
});

function doAjax() {
  var ajaxCall = jQuery.ajax(ajaxObject);
  ajaxCall.done(function(data, status, xhr) {
    //some logic go here
  });
  return ajaxCall;
}

尽管如此，.then 处理程序内部的逻辑首先被执行，即在 doAjax 完成之前。

我相信我需要更改jQuery.when(jQuery('.saveBtn').trigger('click',{'evtData':'link'}))，因为它可能没有获得应有的 Promise 状态并立即被标记为 Resolved 从而执行回调而不等待？ 我尝试在 .saveBtn 中返回 doAjax，但这也没有什么不同。

请出主意。

Answer 1

问题是因为trigger() 不是异步函数，所以会立即调用then。直接通过点击.link 调用doAjax() 而不是伪造DOM 事件会更有意义。试试这个：

jQuery(function($) {
  $('.parentDiv').on('click', '.link', function(e) {
    doAjax().then(function {
      // rest of the logic that should be performed on click of .link
    });
  });

  $('.saveBtn').on('click', function() {
    doAjax()
  });

  function doAjax() {
    var ajaxCall = $.ajax(ajaxObject);
    ajaxCall.done(function(data, status, xhr) {
      // some logic go here
    });
    return ajaxCall;
  }
});