歡迎來到Linux教程網
Linux教程網
Linux教程網
Linux教程網
Linux教程網 >> Linux編程 >> Linux編程 >> AngularJS 1.3 支持使用 $digest() 循環實現延遲

AngularJS 1.3 支持使用 $digest() 循環實現延遲

日期:2017/3/1 9:39:07   编辑:Linux編程

當在擴展一個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 - 基本功能介紹 http://www.linuxidc.com/Linux/2014-05/102140.htm
  2. 帶你走近AngularJS - 體驗指令實例 http://www.linuxidc.com/Linux/2014-05/102141.htm
  3. 帶你走近AngularJS - 創建自定義指令 http://www.linuxidc.com/Linux/2014-05/102142.htm

如何在 AngularJS 中對控制器進行單元測試 http://www.linuxidc.com/Linux/2013-12/94166.htm

在 AngularJS 應用中通過 JSON 文件來設置狀態 http://www.linuxidc.com/Linux/2014-07/104083.htm

AngularJS 之 Factory vs Service vs Provider http://www.linuxidc.com/Linux/2014-05/101475.htm

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

AngularJS 的詳細介紹:請點這裡
AngularJS 的下載地址:請點這裡

Copyright © Linux教程網 All Rights Reserved