2

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

我记得读过 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())
            }
          });
        }

    })
4

2 回答 2

1

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

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

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

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

于 2012-06-06T19:33:38.603 回答
0

我在大量使用 SharePoint Web 服务时遇到过类似的问题——您经常需要从多个源中提取数据以生成单个进程的输入。

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

DepressedPress.com 上的 DPAJAX

这个简单的示例使用三个调用创建一个请求，然后按照调用顺序将该信息传递给单个处理程序：

    // 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);

请注意，与提供此方法的许多其他解决方案不同，此方法不会强制进行调用的单线程 - 每个仍将在环境允许的范围内尽可能快（或尽可能慢）运行，但只有在全部完成后才会调用单个处理程序。如果您的服务有点不稳定，它还支持设置超时值和重试尝试。

在您的情况下，您可以发出单个请求（或组相关请求 - 例如快速的“最需要”请求和运行时间较长的“很高兴”请求）来调用所有数据并同时显示所有数据（或者如果有多个请求，则以块为单位）完成时。您还可以专门设置要使用的背景对象/线程的数量，这可能有助于解决您的性能问题。

我发现它非常有用（并且从代码的角度来看非常容易理解）。不再有链接，不再计算调用和保存输出。只需“设置并忘记它”。

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

于 2012-09-08T15:21:47.887 回答