我正在为一个应用程序使用 AngularJS,在将更改推送到 View 时遇到了某个问题。
用例
当我对 View /数据进行重大更新(xhr 请求、恢复状态和批处理)时,我会使用加载程序 gif 向用户指示。我使用绑定(bind)到 img 标签的标志(使用 ngClass),因此在设置标志时显示加载器 gif。该标志还用作锁(不是以线程安全的方式,但足以完成手头的任务)。我在启动进程时获取锁(设置标志)并在所有 xhr 调用的最后一个 promise ($q)解决后释放它。
问题
当我使用 HTML5 历史 API 恢复数据并从服务器加载数据(重新加载、向前或向后)时, View 可能需要很长时间才能反射(reflect)对模型所做的更改。因为我只依赖于 http 请求的 promise ,所以我的加载器 gif 在 View (明显)更新之前被隐藏了。有没有办法检测用户何时可以看到更改而不是观察模型更改?这可能不再是一个 Angular 问题,而是一个普遍的 JS 问题。
时间线
(1) 设置标志->
(2) 执行 xhr/模型更改 ->
(3) 释放锁->
(4) AngularJS应用完成->
(5) 变化可见
问题主要出现在第 4 步和第 5 步之间(还有第 3 步和第 4 步,但这实际上并不明显)。
示例
作为用户,我可以清楚地看到正在生成的表格行,但表格单元格仍然是空的。几十毫秒后,值出现。我不确定这是默认的 Angular 行为还是我的浏览器无法足够快地呈现对 HTML 的更改。
我的想法
我想这个问题与浏览器更新视口(viewport)的方式交织在一起。我还没有真正深入研究,但在我看来 Angular 实际上已经应用了这些更改,但浏览器尚未呈现它们。使用一个指令来观察主数据表的 $last 标志,我可以检测到 ng-repeat 完成和 View 呈现可见之间的相当大的延迟。可能是这对浏览器的细节影响太大了,但也许其他人对此有一些想法可以分享:)
最佳答案
你可以有最低优先级的指令......例如-1 并使用该指令显示或隐藏微调器/gif 元素
作为优先级最低的指令,这将在 View 更新中最后执行。所以 show-spinner 在这个指令的一部分可以是 false,因此 spinner 只会在所有更改都呈现后隐藏......
关于javascript - 等待在 AngularJS/通用 javascript 中应用更改?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21629317/