如何在 http 获取请求期间保持 Angular UI 响应？答案

【问题标题】：How to keep Angular UI responsive during an http get request?如何在 http 获取请求期间保持 Angular UI 响应？
【发布时间】：2015-10-30 15:43:16
【问题描述】：

我的控制器中有一个获取请求：

  $http.get('/api/ideas').success(function(ideas) {
    vm.ideas = ideas;
  });

只要我的控制器被调用，这个 api 就会被调用，并且我的 UI 变得没有响应，直到我从回调中得到结果/所有想法都被列出（显然是 mg-repeat）。当我有例如我的数据库中有 1000 个想法，我的 UI 在 3-5 秒内没有响应。但我认为那个电话是一个回调？！

这就是我的后端的样子：

    router.get('/api/ideas', controller.find);

    exports.find = function(req, res) {
      Idea.find(function (err, ideas) {
        if(err) { return handleError(res, err); }
        return res.json(200, ideas);
      });
    };

这里有什么问题？

编辑 - 已解决：

当我像这样在后端延迟时：

exports.index = function(req, res) {
  Idea.find(function (err, ideas) {
    if(err) { return handleError(res, err); }
    setTimeout(function() {
      return res.json(200, ideas);
    }, 3000);
  });
};

虽然我只有 2 个想法，但 UI 在这 3 秒内是响应式的。在我得到回应之前，我仍然可以点击其他部分。所以我认为@Iggy 是对的。问题不是http get，而是ng-repeat。

【问题讨论】：

这里肯定缺少一些变量，$http API 使用带有 async = true 的 XMLHttpRequest，所以无论你的后端服务器在做什么，你的 UI 应该仍然是响应式的。您是否正在使用某种将异步调用更改为同步的模拟框架？
我实际上有一个平均堆栈应用程序。当然，幕后还有很多，但我认为其他部分与这个问题无关。此外，我们刚刚开始使用默认的平均堆栈应用程序。我不认为那些默认部分可能使用“async = false”.. 我们真的没有在其他部分编辑/操作太多逻辑
您能否从您的问题中删除解决方案并将其作为正确答案提交？（与元问题略有相关meta.stackoverflow.com/q/309266/2564301）
这不是解决方案。查看问题实际位置的提示

标签： angularjs http-get

【解决方案1】：

问题不在于这里的回调（它是异步的），问题在于 ng-repeat 通过在 DOM 中一一添加您的想法来减慢您的 UI。

要解决这个问题，您可以使用分页，或查看提高 ng-repeat 性能的不同方法。

这样做的基本方法是使用 limitTo 过滤器：

<div ng-init="totalDisplayed=20" ng-repeat="item in items | limitTo:totalDisplayed">
{{item}}
</div>
<button class="btn" ng-click="totalDisplayed = totalDisplayed+20">Load more</button>

【讨论】：