前言

對于一個在前端屬于純新手的我來說，Javascript都還是一知半解，要想直接上手angular JS，遇到的阻力還真是不少。不過我相信，只要下功夫，即使是反人類的設計也不是什么大的問題。

今天，我們要聊得是Angularjs中的小明星$apply。當我們數據更新了，但是view層卻沒反應時，總能聽到有人說，用apply吧，然后，懵懂無知的我們，在賦值代碼后面加了$scope.$apply() ,然后就驚喜的發現。噢，真的更新了。

然而，有些時候，編譯器會無情的給你返回

Error: $digest already in progress

那么，導致這些現象的原因時什么的呢？$apply究竟干了啥？聽我慢慢到來。

一.$apply的作用

$apply()函數可以從Angular框架的外部讓表達式在Angular上下文內部執行。

上面是AngularJs權威教程中的一句話。什么意思呢？

首先，你要清楚，在原生js或者第三方框架下，修改model，是有可能不會觸發視圖更新的，比如setTimeout、jquery插件。為什么？因為他們脫離了Angularjs的上下文，Angularjs并不能監聽到數據的改變?？蠢?。

1.setTimeout

html:

<p>{{name}}</p>

js:

$scope.name="張三";setTimeout(function(){$scope.name = '李四';//$scope.$apply()},500)

首先，name等于張三，500ms后，我把他賦值為李四，但是，頁面上并沒有改變，依然是張三。

而，我們把$scope.$apply()放開，就正常了，張三成功變為李四。

2.第三方插件

html:

<p>Date: <input type="text" id="datepicker"></p><p><header>所選日期</header>{{selectedDate}}</p>

js:

$scope.selectedDate = '';$( function() { $( "#datepicker" ).datepicker({ onClose: function( selectedDate ) { $scope.selectedDate = selectedDate; // $scope.$apply(); } });} );

這是jquery的datepicker插件，當我們選定日期后，下面的日期應該隨之顯現，而現在卻沒有。這種情況就必須依靠$apply(),才能更新視圖。

以上兩種情況，都因為不處于Angularjs上下文中，導致監聽不到數據的變化。而$apply究竟干了什么，才導致數據更新正常了呢？

其實$apply相當于一個觸發器，它的作用就是觸發digest循環，從而更新視圖。

在digest是Angularjs的核心，是它實現了神奇的數據綁定。凡是觸發事件，必會觸發digest循環，比如，我們數值的ng事件，click啊，change,實際上都是觸發了digest循環。

所以，我們所做的事，其實就是手動觸發了digest循環。關于digest循環，屬于題外話，這里不做過多介紹，想深入了解的同學，可以看看書籍，或者百度。

二.更好地運用digest循環

在Angularjs中，除了$apply可以觸發digest循環外，還有其他的方法，也可以觸發此循環。而且$apply往往時最壞的選擇。下面推薦一些更好的選擇。

1.$digest

$scope.$digest()的速度要比$apply要快，因為它只更新當前作用域和子作用域的值，對于父作用域時不管的。而$apply還要評估父作用域，這就大大消耗了性能。

2.$timeout

用$timeout去代替你的setTimeout,$timeout作為Angularjs的自帶服務，當然時更契合Angularjs環境啦。它會隱性觸發digest循環，而且它會延遲執行，會在上一個digest循環完成后的下一刻，觸發digest循環，這樣就不會出現上文所說的

$digest already in progress

我們把setTime的代碼放到$timeout中

$timeout(function(){$scope.name = '李四';},500)

這就能正常工作了，看，沒有討厭的apply了！

3.$evalAsync

最推薦的應該時這個方法了。如果當前正好有一個digest循環在執行，那么它就會把導致digest循環的操作，放到當前digest循環中去執行。而$timeout是要等到當前digest循環執行完，再執行一次digest循環才可以。所以evalAsync執行更快，性能更好。我們可以像$timeout那樣去調用它，即

$scope.$evalAsync(   function( $scope ) {   console.log( "$evalAsync" );   }  );

以上，就是今天要說的全部內容。Angularjs中還藏著許多奧秘，和更好的使用方法，希望大家可以深入地研究，分享出更好的文章。

下面是可執行的代碼，大家可以探究探究：https://codepen.io/hanwolfxue/pen/yEZbYQ

總結

以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值，如果有疑問大家可以留言交流，謝謝大家對武林網的支持。