AngularJS:如何在渲染ng-repeat的过程中保持UI对输入的响应



我已经阅读了几篇关于在ng-repeat中进行大型或复杂DOM更改的危险的文章/帖子。 这些都很有趣,也很有意义。

我有一个大的 ng 重复,大约需要 10 秒才能在 Chrome 中进行 DOM 更改和渲染(与下载时间等无关(。结果正是用户所需要的,他们愿意等待数据那么久,但如果他们在等待时仍然可以使用页面的其余部分,那就太好了。

这些渲染发生在 ng 重复的 50-100 个循环中。 在此期间,用户无法"点击",也就是说,运行 ng-show 或 ng-hide 指令的点击等待 ng-repeat 渲染完全完成。

有没有办法让我的浏览器并行运行这些函数,或者只是优先考虑 ng-show/ng-hide 函数,而不是坚持完全运行 ng-repeat? 也许有一种方法可以"在后台操作 DOM/渲染"或优先级较低? 或者也许有某种方法可以"分解"ng-repeat,以便其他交互有机会在迭代之间运行? 我想在AngularJS的内部并不是那么简单。

注意:这是针对 AngularJS,而不是 Angular 2+。

我有一个大的 ng 重复,大约需要 10 秒来更改 DOM 和 在Chrome中呈现(与下载时间等无关(。结果是 正是用户需要的,他们愿意等待数据 那么长,但如果他们仍然可以使用其余的,那就太好了 等待时的页面。

Javascript(在你的例子中是Angular(运行单线程(事件循环(,所以没有什么可做的。

在 Angular 1.x 中ngRepeat庞大列表的指令真的很痛苦,每个开发人员都以自己的方式解决它。

但是,您可以提高可用性。例如:

  • 在加载所有数据之前不显示结果。在此期间,用户可以做他们的事情
  • 不要加载ng-repeat中的所有项目。使用Load More ..按钮加载 5-10。或者使用无限滚动功能在用户向下滚动列表时动态加载
  • 尝试从列表项中删除 AMAP 观察程序(下拉列表,e.t.c(

最新更新