The usage of $timeout in Angular JS and its difference from window.settimeout

The use of $timeout

Angular.js's $timeout directive makes a package for Window.settimeout, whose return value is a Promise object. When the defined time is up, the Promise object will be resolve and the callback function will be executed.

If you need to cancel a timeout, call the $timeout.cancel (Promise) method.

Usage:

$timeout(fn, [delay], [invokeapply]);

fn: callback function (required)

The Delay:number type. The delay time (not required), if not filled, indicates that such threads will be executed after empty, such as when the page is rendered.

Invokeapply: Boolean value. If dirty value detection is required (not required), the default is False, and if set to true, the FN callback is wrapped in $scope. $apply ().

Return value: Returns a Promise object. When the defined time is up, the Promise object is resolve,resolve and the value of the FN callback function is the return value.

Method:

$timeout. Cancel ([promise])

Promise: A Promise object (not required) created by $timeout (). After you call Cancel (), the Promise object is reject.

Return value: If the callback for $timeout () has not been executed, then cancel success, return True

Here's a simple test:

varTimeoutapp = Angular.module (' Timeoutapp '),[]); Timeoutapp.run (function($timeout) {varA = $timeout (function() {Console.log (' Execute $timeout callback '); return' Angular '          },1000); A.then (function(data) {Console.log (data)},function(data) {Console.log (data)}); //$timeout. Cancel (a);})

Run to see the console print later:

Executes the $timeout callback angular

If I open the comment and execute the. Cancel () method, then the $timeout callback is not executed, and the promise returned by the reject is printed by the console:

Canceled

Here is a useful little demo: Delay drop-down menu: When the mouse on the button, delay 500 milliseconds to display the drop-down menu, when the mouse left the button, the delay of 500 milliseconds to hide the drop-down menu, if the mouse is entered in the drop-down menu section, then do not hide the drop-down menu. If the mouse leaves the drop-down menu, the delay is 500 milliseconds to hide the drop-down menu, or the drop-down menu is not hidden if the mouse is in the button.

Html:

<! DOCTYPE html>{font-family: ' MICROSOFT Yahei '    }    </style>Dropdown<span class= "Caret" ></span> </button> <ul class= "Dropdown-menu" ng-show= "Ifshowmenu "Ng-mouseenter =" ShowMenu () "Ng-mouseleave =" Hidemenu () "> <li><a href=" # ">action</a>& Lt;/li> <li><a href= "#" >another action</a></li> <li><a href= "#" >somethingElseHere</a></li> <li><a href= "#" >separated link</a></li> </ul&gt      ; </div> </div></body>
Js:
varTimeoutapp = Angular.module (' Timeoutapp '), []); Timeoutapp.controller (' Myctrl ',function($scope) {$scope. Ifshowmenu=false;}); Timeoutapp.directive (' Dropdown ',function($timeout) {return{restrict:"EA", Link:function(scope,iele,iattr) {Scope.showmenu=function() {$timeout. Cancel (SCOPE.T2); Scope.t1= $timeout (function() {Scope.ifshowmenu=true                },500)            }; Scope.hidemenu=function() {$timeout. Cancel (SCOPE.T1); Scope.t2= $timeout (function() {Scope.ifshowmenu=false                },500)            }; }    }})
The code should be well understood: When you enter the button and enter the UL drop-down menu, you define a timeout callback (which displays the drop-down menu after 500 milliseconds), while the callback from the drop-down menu is removed, while leaving the button and UL instead.
The difference between $timeout and window.settimeout in angular
1. The function passed in $timeout is included in the Try...catch, and the exception is given to $exceptionhandler
2. Window.settimeout Returns a numeric ID that can be canceled by Window.cleartimeout (ID), and $timeout returns a Promise object to be canceled with $timeout.cancel ( The returned Promise object).
3. $timeout the incoming function updates the data bindings within the scope, that is, changes to the $scope in the function trigger the update, and changes to $scope in Window.settimeout do not trigger the update. Of course $timeout has a third parameter, the default is true, and if passed false, the current scope of data binding is not updated.
The usage of $timeout in Angular JS and its difference from window.settimeout