AngularJS 1.3 支持使用 $digest() 循环实现延迟


当在扩展一个Angular应用的时候，巨大的数据集导致$digest()循环运行缓慢。你可以做许多性能上的优化，比如小心$watch()和$filter()，使用一次性绑定，或者使用Batarang找出消耗性能的操作。但有时，即便做了这些提升，由于$digest()循环，具有大量数据的应用还是可以感觉到迟钝。一个典型的例子是键盘输入。如果你有许多数据，并且每当用户向一个input或者textarea输入字符时你的$digest()循环都会开始，那么当有些人打字很快或者一直按着空格键，就会导致处理器过载，于是你就会发现屏幕上的文字更新有明显的延迟。 

我找到处理这个$digest()循环延迟问题的最佳方案是使用debounce函数。你问什么事debounce函数？好吧，John Hann早在2000年写过一篇很好的文章来解释，并且使用pureJS来实现了它。几年后，人们有那个自定义angular服务实现了它。这显得更加angular了，只是让你的代码有点小凌乱。不过现在，Angular 1.3已经官方支持了debounce，所以digest循环延迟变得很容易处理。

提示：debounce函数是指，只要它一直在被调用，它就不会被触发，直到它不再被调用的X毫秒后。 

打个比方，你可以在一个文本框上使用一个150毫秒的debounce函数，那么直到用户停止输入150毫秒后，$digest() 循环才会被触发。随着Angular最新的本地化支持，这变得更加简单了。你需要的只是一个HTML属性，就可以像这样来延迟执行$digest() 循环： 

<input ng-model="user.name" ng-model-options="{ debounce: 150 }" />

那么debounce最好应该延迟几毫秒？好吧，这主要取决于你的$digest()循环的工作量。一方面讲，你的debounce的延迟时间越短，那么从用户开始输入到$digest()被触发和完成的时间也就越短。 这将决定一个应用给人感觉上的响应能力。如果延迟时间太长，你的app将看上去不怎么灵敏。但从另一方面说，如果你的debounce时间太短，$digest()循环将运行的过于频繁，也就回导致你的应用感觉上更加慢了。你会理解什么选择对你的应用来说是最好的。

祝优化顺利！ 

希望你喜欢，并分享我的工作~带你走近AngularJS系列：

  1. 带你走近AngularJS - 基本功能介绍
  2. 带你走近AngularJS - 体验指令实例
  3. 带你走近AngularJS - 创建自定义指令

如何在 AngularJS 中对控制器进行单元测试

在 AngularJS 应用中通过 JSON 文件来设置状态

AngularJS 之 Factory vs Service vs Provider

AngularJS —— 使用 ngResource、RESTful APIs 和 Spring MVC 框架提交数据

AngularJS 的详细介绍：请点这里
AngularJS 的下载地址：请点这里

本文永久更新链接地址：

相关内容