Question

我有一个仪表板屏幕，需要在加载时发出大约20个AJAX请求，每个请求返回不同的统计信息。总的来说，所有请求返回大约需要10秒钟。然而，在那10秒钟内，UI几乎被锁定了。

我记得读过Nick Zakas的一本JS书，其中介绍了在集中操作（使用计时器）期间维持UI响应的技术。我想知道是否有类似的技巧来处理我的情况？

* 我试图避免因为多种原因而混淆AJAX调用

$(".report").each(function(){
        var container = $(this)
        var stat = $(this).attr('id')
        var cache = db.getItem(stat)

        if(cache != null && cacheOn)
        {
          container.find(".value").html(cache)
        }
        else
        {
          $.ajax({
            url: "/admin/" + stat,
            cache: false,
            success: function(value){
              container.find(".value").html(value.stat)
                db.setItem(stat, value.stat);
                db.setItem("lastUpdate", new Date().getTime())
            }
          });
        }

    })

Answer 1

如果您有权访问jQuery，则可以利用$.Deferred对象同时进行多个异步调用，并在它们全部解析后执行回调。

http://api.jquery.com/category/deferred-object/

http://api.jquery.com/deferred.promise/

如果这些回调中的每一个都在对DOM进行修改，则应将更改存储在某个临时位置（例如内存中的DOM对象）中，然后将它们全部附加到所有位置。 DOM操作调用非常耗时。

Answer 2

我在使用SharePoint Web服务方面遇到过类似的问题 - 您经常需要从多个来源提取数据，以便为单个进程生成输入。

为了解决这个问题，我将这种功能嵌入到我的AJAX抽象库中。您可以轻松定义一个请求，该请求将在完成时触发一组处理程序。但是，每个请求都可以使用多个http调用进行定义。这是组件（和详细文档）：

DPAJAX at DepressedPress.com

这个简单的例子创建了一个带有三个调用的请求，然后将这些信息按照调用顺序传递给一个处理程序：

    // The handler function 
function AddUp(Nums) { alert(Nums[1] + Nums[2] + Nums[3]) }; 

    // Create the pool 
myPool = DP_AJAX.createPool(); 

    // Create the request 
myRequest = DP_AJAX.createRequest(AddUp); 

    // Add the calls to the request 
myRequest.addCall("GET", "http://www.mysite.com/Add.htm", [5,10]); 
myRequest.addCall("GET", "http://www.mysite.com/Add.htm", [4,6]); 
myRequest.addCall("GET", "http://www.mysite.com/Add.htm", [7,13]); 

    // Add the request to the pool 
myPool.addRequest(myRequest);

请注意，不像许多提供的此方法不会强制调用单线程的其他解决方案被提出 - 每个仍将运行尽可能快（或慢）的环境允许，但单个处理程序才会被调用时，所有完成了。它还支持设置超时值和重试尝试，如果您的服务有点冒险。

在你的情况，你可以做一个请求（或一组相关的请求 - 例如一个快速的“最需要”的要求和更长的运行“最好有”的要求）来调用所有数据，并在显示这一切同一时间（或在多个请求时以块为单位）完成时。您还可以专门设置要使用的后台对象/线程数，这可能有助于解决性能问题。

我发现它非常有用（从代码的角度来理解它非常简单）。没有更多的链接，不再计算呼叫和节省输出。只需“设置并忘记它”。

哦 - 关于你的锁定 - 你是否在任何机会在本地开发平台上测试它（在与浏览器相同的机器上运行服务器请求）？如果是这样，可能只是机器本身正在处理您的请求，而不是指示实际的浏览器问题。

UI在AJAX调用期间没有响应

2 个答案: