单击执行 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 状态并立即被标记为已解决，从而无需等待即可执行回调？。我在 .saveBtn 中尝试了 return 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;
  }
});

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

Attach a callback on click of a button which does an ajax operation

javascript

jquery

promise

.when