从外部函数检测ajax调用的结束

Question

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

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

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

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

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

Answer 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)