UI 在 AJAX 调用期间无响应

UI unresponsive during AJAX calls

本文关键字：响应 调用 AJAX UI      更新时间：2023-09-26

我有一个仪表板屏幕，需要在加载时发出大约 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())
            }
          });
        }
    })

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

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

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

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

我在大量使用 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);

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

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

我发现它非常有用（从代码的角度来看，理解起来非常简单）。 不再需要链接，不再需要计数调用和保存输出。 只是"设置并忘记它"。

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

相关文章：