检测来自外部函数的 ajax 调用结束答案

【问题标题】：Detecting end of ajax call from an external function检测来自外部函数的 ajax 调用结束
【发布时间】：2019-02-01 20:38:56
【问题描述】：

我正在一个项目中工作，该项目在 JavaScript 中创建了一些插件来进行一些 ajax 调用。我不允许更改插件中的代码。

插件中有一个按钮类，当点击它时执行一个ajax并改变数据库中的一个字段，并根据返回的布尔值改变点击按钮的文本颜色。有一个类似按钮的动态列表（按钮的数量不固定），每个按钮在单击时都会以相同的方式对数据库进行更改，并根据返回的布尔值分配一个状态。

现在，当点击这些按钮中的任何一个时，我需要检查每个状态下的按钮数量并将结果输出到控制台。

我正在使用$(document).on('click', 'button.plugin-button', function() {}) 检测按钮单击，但是它没有给我正确的结果，因为 ajax 是从插件代码内部执行的，而我的按钮单击处理程序是在 ajax 之前执行的。

有什么方法可以检测 AJAX 的执行，当它完成时，调用我的点击处理程序并显示正确的结果？

【问题讨论】：

插件有回调吗？
什么插件？你能得到插件名称吗？
如果插件不提供任何 API 或任何回调，则解决方案可能比您预期的要复杂得多（假设有一个有效的）。除此之外，您是否有机会提供代码的当前行为，并最终提供插件的一些文档？开箱即用，问题非常模糊，很难判断解决方案是简单还是复杂。我假设插件确实提供了回调或类似的东西，否则那会很奇怪。
如果您可以使用代理对象，您可以代理 window.xmlhttprequest 构造函数并订阅它的 onreadystatechange 事件。这很不干净，但可以帮助你。
stackoverflow.com/a/27363569/240443

标签： javascript jquery ajax

【解决方案1】：

你可以使用 ajaxComplete

$( document ).ajaxComplete(function( event, xhr, settings ) {
if ( settings.url === "ajax/test.html" ) {
    $( ".log" ).text( "Triggered ajaxComplete handler. The result is " +
  xhr.responseText);
}});

或者像

这样的回调函数

function checkButtonsState(){}
function makeAjaxRequest(para1, para2, callback){
/*onsuccess or on error complete*/
callback();
}
/*call it like*/
makeAjaxRequest("para1","para2", checkButtonsState)

【讨论】：