jQuery Ajax 回调挂钩系统

Question

单击按钮时，将进行 ajax 调用。该按钮提供了一个与 ajax 一起传递的变量。当它是.done() 并返回数据时，我希望能够“附加”或“挂钩”任意数量的其他函数（可能在其他文件中，并且可能在此 ajax 函数之前或之后加载）以访问返回的数据和用它做点什么。从我目前收集到的信息来看，这将是一个延期/承诺的情况，但我无法在任何地方找到灵丹妙药的解决方案（希望不使用任何计时器）。

 

page.html:

<button data-ajax_action="url/to/action">Button</button>

 

common.js:

$(document).on('click','[data-ajax_action]',function(e){

    var action = $(this).data('ajax_action');

    $.ajax({

        url: action,
        dataType: 'json'

    }).done(function(data){

        // do default stuff with data
        // somehow provide access to data var to other functions
    });

    e.preventDefault();
});

 

现在假设我在 common.js 之前加载了另一个 js 文件，该文件需要在进行 ajax 调用后“挂钩”/访问该数据。我将如何设置它（也让任意数量的其他脚本也这样做）？

Answer 1

类似于 Barmar 的回答，但使用 jQuery Callbacks 对象，该对象（从 v1.7 开始）在概念上类似于数组，但具有更好的控制可能性，用“标志”指定。

将jQuery.Callbacks 实例分配给全局ajax_callbacks 变量：

var ajax_callbacks = new jQuery.Callbacks( "once memory" );

有关可能标志的描述，请参阅 jQuery 文档。 “一次记忆”是一个很好的起点。

然后其他代码可以这样做：

ajax_callbacks.add(function(data) { /* do something with data */  });

在你的.done() 函数中你会这样做：

ajax_callbacks.fire(data);

Answer 2

使用包含要调用的函数数组的全局 ajax_hooks 变量。

var ajax_hooks = [];

然后其他代码可以这样做：

ajax_hooks.push(function(data) { // do something with data }));

在你的.done() 函数中你会这样做：

ajax_hooks.forEach(function(callback) {
    callback(data);
});