jQuery Ajax 回调挂钩系统

Question

单击按钮时，会进行 ajax 调用。该按钮提供了一个与 ajax 一起传递的变量。当它是 .done() 并且返回数据时，我希望能够 'attach' 或 'hook' 任意数量的其他函数（可能在其他文件中并且可能在此之前或之后加载 ajax 函数）来访问返回的数据并对其进行处理。根据我目前收集到的信息，这将是 deferred/promise 情况，但我无法在任何地方找到灵丹妙药解决方案（希望不使用任何计时器）。

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 调用之后 'hook into'/访问该数据。我将如何设置它（也让任意数量的其他脚本做同样的事情）？

Answer 1

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

var ajax_hooks = [];

然后其他代码可以做：

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

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

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

Answer 2

像 Barmar 的回答一样，但使用 jQuery Callbacks 对象，它（从 v1.7 开始）在概念上类似于数组，但具有更好的控制可能性，用 "flags" 指定。

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

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

有关可能标志的说明，请参阅 jQuery 文档。 "once memory" 是一个很好的起点。

然后其他代码可以做:

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

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

ajax_callbacks.fire(data);

jQuery Ajax 回调挂钩系统

jQuery Ajax Callback Hook System

ajax

jquery

hook

callback

deferred