Home > Developer > Web Develop
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 is resolve and the callback function is executed.
If you need to cancel a timeout, call the $timeout.cancel (Promise) method.
Usage:
$ Timeout ( fn [ [
fn: callback function (required)
delay: Number type. The delay time (not required), if not filled, indicates that the thread will execute after it is empty. For example, 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 () execution
Return value: Returns a Promise object. When the defined time is up, the value of the Promise object will be resolve.resolve the return value of the FN callback function.
Method:
$timeout. Cancel ([Promise])
Promise: A Promise object created by $timeout (). (not required). After you call Cancel (), the Promise object is reject.
Return value: If the callback for $timeout () has not been executed, the cancellation succeeds. Returns True
Here's a simple test:
var timeoutapp = angular.module (' Timeoutapp ' ,[]); Timeoutapp.run ( function ($timeout) {
var a = $timeout (function () {Console.log ( ' executes $timeout callback ' return ' angular ' }, 1000); A.then ( function function (data) {Co Nsole.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, 500 milliseconds to hide the drop-down menu, if the mouse is entered button, then the drop-down menu is still not hidden
Html:
<!DOCTYPE HTML><HTMLNg-app= "Timeoutapp"><Head> <title>$timeout Services</title> <MetaCharSet= "Utf-8"> <Linkrel= "stylesheet"href=".. /bootstrap.css "/> <Scriptsrc=".. /angular.js "></Script> <Scriptsrc= "Script.js"></Script> <styletype= "Text/css"> * {font-family:' MICROSOFT Yahei '} </style></Head><Body> <DivNg-controller= "Myctrl"> <Divclass= "Dropdown"dropdown> <Buttonclass= "btn btn-default dropdown-toggle"type= "button"Ng-mouseenter= "ShowMenu ()"Ng-mouseleave= "Hidemenu ()">Dropdown<spanclass= "Caret"></span> </Button> <ulclass= "Dropdown-menu"Ng-show= "Ifshowmenu"Ng-mouseenter= "ShowMenu ()"Ng-mouseleave= "Hidemenu ()"> <Li><ahref="#">Action</a></Li> <Li><ahref="#">Another action</a></Li> <Li><ahref="#">Something Else here</a></Li> <Li><ahref="#">Separated link</a></Li> </ul> </Div> </Div></Body></HTML>
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 deselected. Instead of leaving the button and UL.
Reference Original: http://docs.angularjs.cn/api/ng/service/$timeout
Code Address: Https://github.com/OOP-Code-Bunny/angular/tree/master/%24timeout
Angularjs's $timeout directive
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
