异步回调答案

【问题标题】：Asynchronous callbacks异步回调
【发布时间】：2019-10-04 01:36:28
【问题描述】：

我编写了一个使用 jQuery 发出异步请求的函数。

var Site = {

    asyncRequest : function(url, containerId) {        
        $.ajax({
            url : url,
            onSuccess: function(data){
                $(containerId).html(data);
            }
        });
    }
}

由于我使用的是记事本，语法可能略有错误，但希望您能理解。

我调用函数：

Site.asyncRequest('someurl', container1);
Site.asyncRequest('someurl', container2);

这两个请求都由服务器发送和处理。两个响应被发回，这是我所期望的。但是，我希望 container1 和 container2 包含来自这两个请求的响应。

问题是只显示最后一个响应，我不知道为什么。我不知道 jQuery ajax 如何跟踪请求/响应，所以也许这是个问题。

假设我发出 5 或 10 个请求，jQuery ajax 如何知道哪个响应是针对哪个请求以及它在哪里跟踪它？

谢谢

【问题讨论】：

您好，谢谢。我可以尝试将函数作为参数传递，然后从 OnSuccess 调用该函数。我会看看我能不能让它工作。我主要担心的是我无法轻松调试和跟踪正在发生的事情。

标签： javascript jquery asynccallback

【解决方案1】：

这似乎是一个 Javascript 范围问题。请尝试以下操作：

var Site = {
    asyncRequest: function(url, containerId) {
        (function(theContainer) {
            $.ajax({
                url: url,
                onSuccess: function(data) {
                    $(theContainer).html(data);
                }
            });
        })(containerId);
    }
};

这为每个函数调用创建了一个单独的范围，因此“theContainer”指向的实际值对于每个 onSuccess 匿名函数都是不同的。

【讨论】：

@SheikhHeera，实际上并非如此，原因有点模糊：.ajax 方法在事件循环的当前事件中使用 url 参数，而 containerId/ theContainer 值将在稍后的事件循环中用于另一个事件。由于 Javascript 是单线程，因此 url 参数不可能是我们想要的任何东西。如果onSuccess 函数需要使用它，我们只需要重新定义url 的范围。

【解决方案2】：

这里发生的情况是，由于声明函数的方式，正在创建一个闭包。在此处查看“更高级的示例”：http://skilldrick.co.uk/2010/11/a-brief-introduction-to-closures/

基本上，containerId 在该 onSuccess 匿名函数的所有实例之间共享。我没有对此进行测试，但我相信如果您在 Site 之外定义了您的 asyncRequest 函数，这将起作用。

就这个问题的更优雅的解决方案而言，也许其他人会回答得更好。

【讨论】：