如何在 http get 请求期间保持 Angular UI 响应？

Question

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

  $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。

Answer 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>

如何在 http get 请求期间保持 Angular UI 响应？

How to keep Angular UI responsive during an http get request?

http-get

angularjs