javascript - AJAX 调用期间 UI 无响应

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 操作调用非常耗时。