素材巴巴 > 程序开发 >

linux js延时函数,AngularJS 1.3 支持使用 $digest() 循环实现延迟

程序开发 2023-09-05 16:51:17

当在扩展一个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() 循环:

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

祝优化顺利!

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

AngularJS —— 使用 ngResource、RESTful APIs 和 Spring MVC 框架提交数据 http://www.linuxidc.com/Linux/2014-07/104402.htm

AngularJS 的详细介绍:请点这里

AngularJS 的下载地址:请点这里

0b1331709591d260c1c78e86d0c51c18.png


标签:

上一篇: 设置跨域配置 下一篇:
素材巴巴 Copyright © 2013-2021 http://www.sucaibaba.com/. Some Rights Reserved. 备案号:备案中。