前言

相信大家在一開始用angular做項目的時候，一定碰到過$scope.$apply()方法，表面上看，這像是一個幫助你進行數(shù)據(jù)更新的方法，那么，它為何存在，我們又該如何使用它呢。下面話不多說，來一起看看詳細的介紹吧。

JavaScript執(zhí)行順序

JavaScript單線程操作，代碼按照代碼片段的順序來之行，每個代碼塊從運行到結(jié)束都不會被打斷，這也是為什么會發(fā)生瀏覽器阻塞的情況，往往是有一部分在運行，而導(dǎo)致其他所有的代碼段凍結(jié)。

每當(dāng)有耗費時間較多的任務(wù)出現(xiàn)，例如等待一個click事件，等待Ajax請求的回應(yīng)，我們都會設(shè)定一個回調(diào)函數(shù)，當(dāng)click事件被觸發(fā)或者計時器完成，就會創(chuàng)建一個新的JavaScript turn，并執(zhí)行完回調(diào)函數(shù)。

例如:

var button = document.getElementById('clickMe');

function buttonClicked () { 

 alert('the button was clicked'); 

 }

button.addEventListener('click', buttonClicked); 

 

function timerComplete () { 

 alert('timer complete'); 

}

setTimeout(timerComplete, 2000); 　　

當(dāng)JavaScript代碼開始運行，先找到一個botton，并添加一個點擊的監(jiān)聽事件，且設(shè)定一個timeout。瀏覽器會在這段代碼執(zhí)行完畢之后進行web的更新，并且接受用戶的輸入。

如果瀏覽器檢測到一個新的點擊事件發(fā)生，他就會開始一個turn，來執(zhí)行buttonClicked函數(shù)。當(dāng)函數(shù)執(zhí)行結(jié)束，這個階段也隨之結(jié)束。

經(jīng)過2000毫秒，瀏覽器會創(chuàng)建一個過程來執(zhí)行timerComplete。在這兩個過程之間，頁面被重繪，輸入被接收。

如何來更新綁定數(shù)據(jù)

Angular為我們提供了一些接口來綁定JavaScript代碼與數(shù)據(jù)，Angular 采用任何數(shù)據(jù)可以用來綁定，并在JavaScript的末位運行并進行，并檢查數(shù)據(jù)更新。

進行數(shù)據(jù)變化檢查的實際上是$digest函數(shù)，但是通常我們不是直接使用$digest函數(shù)，而是使用$apply,$apply函數(shù)接收表達式或者函數(shù)作為參數(shù)后調(diào)用$digest來更新監(jiān)控器。

那我們究竟要什么時候來調(diào)用$apply呢，實際上，Angular幾乎在所有提供的代碼中添加了$apply，如ng-click，初始controller，$http的回調(diào)操作，在這，你并不需要親自調(diào)用 $apply，而且重復(fù)的調(diào)用會引起錯誤。

因此，當(dāng)你運行了一個新階段，并且這部分并不屬于Angular庫的情況下才需要使用$apply。這有一段關(guān)于setTimeout的代碼，在經(jīng)過了2000毫秒的延遲之后，代碼進入執(zhí)行了一個新的階段，但是Angular并不知道數(shù)據(jù)有更新，因此更新并不會被顯示。

function Ctrl($scope) { 

 $scope.message = "等2秒后進行更新";

 

 setTimeout(function () {

  $scope.message = "時間到";

  // AngularJS unaware of update to $scope

 }, 2000); 

} 

為了方便大家的使用，Angular提供了$timeout來代替setTimeout,相當(dāng)于在其中默認(rèn)調(diào)用$apply。

如果在你的代碼中使用了除$http之外的Ajax調(diào)用，除了ng-*之外的監(jiān)聽器，或者除了$timeout之外的計時器，都應(yīng)該使用$scope.$apply來同步顯示綁定。

總結(jié)

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。

最新評論