AngularJS:如何在呈现 ng-repeat 的过程中保持 UI 响应输入
AngularJS: How to keep UI responding to input in the middle of rendering a ng-repeat
我读过几本 articles/posts 关于在 ng-repeat 中进行大的或复杂的 DOM 更改的危险。这些都很有趣,也很有道理。
我有一个很大的 ng-repeat,需要大约 10 秒才能 DOM 更改并在 Chrome 中呈现(与下载时间等无关)。结果正是用户所需要的,他们愿意等待那么长时间的数据,但如果他们在等待期间仍然可以使用页面的其余部分,那就太好了。
这些渲染发生在 ng-repeat 的 50-100 次循环中。在此期间,用户无法"click around",即点击运行 ng-show 或 ng-hide 指令等待ng-repeat 渲染完全完成。
有什么方法可以让我的浏览器使用 运行 这样的功能 ,可以并行使用,也可以只优先使用 ng-show/ng-hide 功能,而不是而不是坚持 运行 完整地重复 ng-repeat?也许有 "manipulate DOM/render in the background" 或优先级较低的方法?或者可能有某种方法可以 "break up" ng-repeat 以便其他交互有机会在迭代之间 运行?我想在 AngularJS.
的内部并不是那么简单
注意:这是针对 AngularJS,而不是 Angular 2+。
I have a big ng-repeat that takes about 10 seconds to DOM change and
render in Chrome (independent of download time, etc). The result is
exactly what the users need and they are willing to wait for the data
that long, but it would be nice if they could still use the rest of
the page while waiting.
Javascript(Angular 在你的例子中)运行单线程(一个事件循环)所以没有什么可做的。
在 Angular 1.x ngRepeat
中,针对巨大列表的指令真的很痛苦,每个开发人员都用自己的方式解决它。
但是您可以提高可用性。例如:
- 在加载所有数据之前不显示结果。在此期间用户可以做他们的事情
- 不要加载
ng-repeat
中的所有项目。使用 Load More ..
按钮加载 5-10。或者使用无限滚动功能在用户向下滚动列表时动态加载
- 尝试删除 AMAP 观察者表单列表项(下拉列表,e.t.c)
我读过几本 articles/posts 关于在 ng-repeat 中进行大的或复杂的 DOM 更改的危险。这些都很有趣,也很有道理。
我有一个很大的 ng-repeat,需要大约 10 秒才能 DOM 更改并在 Chrome 中呈现(与下载时间等无关)。结果正是用户所需要的,他们愿意等待那么长时间的数据,但如果他们在等待期间仍然可以使用页面的其余部分,那就太好了。
这些渲染发生在 ng-repeat 的 50-100 次循环中。在此期间,用户无法"click around",即点击运行 ng-show 或 ng-hide 指令等待ng-repeat 渲染完全完成。
有什么方法可以让我的浏览器使用 运行 这样的功能 ,可以并行使用,也可以只优先使用 ng-show/ng-hide 功能,而不是而不是坚持 运行 完整地重复 ng-repeat?也许有 "manipulate DOM/render in the background" 或优先级较低的方法?或者可能有某种方法可以 "break up" ng-repeat 以便其他交互有机会在迭代之间 运行?我想在 AngularJS.
的内部并不是那么简单注意:这是针对 AngularJS,而不是 Angular 2+。
I have a big ng-repeat that takes about 10 seconds to DOM change and render in Chrome (independent of download time, etc). The result is exactly what the users need and they are willing to wait for the data that long, but it would be nice if they could still use the rest of the page while waiting.
Javascript(Angular 在你的例子中)运行单线程(一个事件循环)所以没有什么可做的。
在 Angular 1.x ngRepeat
中,针对巨大列表的指令真的很痛苦,每个开发人员都用自己的方式解决它。
但是您可以提高可用性。例如:
- 在加载所有数据之前不显示结果。在此期间用户可以做他们的事情
- 不要加载
ng-repeat
中的所有项目。使用Load More ..
按钮加载 5-10。或者使用无限滚动功能在用户向下滚动列表时动态加载 - 尝试删除 AMAP 观察者表单列表项(下拉列表,e.t.c)