javascript - 等待在 AngularJS/通用 javascript 中应用更改?

标签 javascript html angularjs browser render

我正在为一个应用程序使用 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 只会在所有更改都呈现后隐藏......

PLUNKER LINK

关于javascript - 等待在 AngularJS/通用 javascript 中应用更改?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21629317/

相关文章:

javascript - 未自动检测到细胞变化

javascript - 返回值给函数

javascript - document.getElementsByClassName 不像 getElementById 那样工作

javascript - 制作一组输入名称属性Javascript

javascript - Grunt 从我的脚本和 CSS 中删除异步和延迟

javascript - 如何查找函数并将其添加到id中?

javascript - 显示/隐藏 Div

html - Bootstrap 按钮与水平形式的文本输入不在同一行

AngularJS HTTP GET 请求返回缓存数据

c# - 带有 angularjs 的模块化 ASP.NET 5 SPA