Angularjs's $timeout directive

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.