开始用angular做项目的时候,一定碰到过$scope.$apply()方法,表面上看,这像是一个帮助你进行数据更新的方法,那么,它为何存在,我们又该如何使用它呢。
JavaScript执行顺序
JavaScript单线程操作,代码按照代码片段的顺序来之行,每个代码块从运行到结束都不会被打断,这也是为什么会发生浏览器阻塞的情况,往往是有一部分在运行,而导致其他所有的代码段冻结。
每当有耗费时间较多的任务出现,例如等待一个click事件,等待Ajax请求的回应,我们都会设定一个回调函数,当click事件被触发或者计时器完成,就会创建一个新的JavaScript turn,并执行完回调函数。
例如:
var button = document.getElementById('clickMe'); function buttonClicked () { alert('the button was clicked'); } button.addEventListener('click', buttonClicked); function timerComplete () { alert('timer complete'); } setTimeout(timerComplete, 2000);
当JavaScript代码开始运行,先找到一个botton,并添加一个点击的监听事件,且设定一个timeout。浏览器会在这段代码执行完毕之后进行web的更新,并且接受用户的输入。
如果浏览器检测到一个新的点击事件发生,他就会开始一个turn,来执行buttonClicked
函数。当函数执行结束,这个阶段也随之结束。
经过2000毫秒,浏览器会创建一个过程来执行timerComplete
。在这两个过程之间,页面被重绘,输入被接收。
如何来更新绑定数据
Angular为我们提供了一些接口来绑定JavaScript代码与数据,Angular 采用任何数据可以用来绑定,并在JavaScript的末位运行并进行,并检查数据更新。
进行数据变化检查的实际上是$digest函数,但是通常我们不是直接使用$digest函数,而是使用$apply,$apply函数接收表达式或者函数作为参数后调用$digest来更新监控器。
那我们究竟要什么时候来调用$apply
呢,实际上,Angular几乎在所有提供的代码中添加了$apply
,如ng-click
,初始controller,$http
的回调操作,在这,你并不需要亲自调用 $apply
,而且重复的调用会引起错误。
因此,当你运行了一个新阶段,并且这部分并不属于Angular库的情况下才需要使用$apply
。这有一段关于setTimeout
的代码,在经过了2000毫秒的延迟之后,代码进入执行了一个新的阶段,但是Angular并不知道数据有更新,因此更新并不会被显示。
function Ctrl($scope) { $scope.message = "等2秒后进行更新"; setTimeout(function () { $scope.message = "时间到"; // AngularJS unaware of update to $scope }, 2000); }
为了方便大家的使用,Angular提供了$timeout
来代替setTimeout
,相当于在其中默认调用$apply
。
如果在你的代码中使用了除$http
之外的Ajax调用,除了ng-*
之外的监听器,或者除了$timeout
之外的计时器,都应该使用$scope.$apply
来同步显示绑定。
小伙伴,你听明白了么? O(∩_∩)O