Angularjs's $timeout directive

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, [delay], [invokeapply]);

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 (' 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, 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>

Js:

var Timeoutapp = 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.

Angularjs's $timeout directive