Angularjs的$apply及其优化使用

今天，咱们要聊得是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