SoFunction
Updated on 2025-04-09

Detailed explanation of the $timeout directive of angularjs

The $timeout instruction pair is encapsulated, and its return value is a promise object. When the definition time is up, the promise object will be resolved and the callback function will be executed.

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

usage:

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

fn: callback function (required)

delay: number type. Delay time (not required). If not filled in, it means that it will be executed after the thread is empty. For example, when the page is rendered.

invokeApply: Boolean value. Whether dirty value detection is required (not required), the default is false if not filled in. If set to true, the fn callback will be packaged and executed in $scope.$apply()

Return value: Return a promise object. When the definition time is up, the value of this promise object will be returned by the fn callback function.

method:

$([promise])

promise: A promise object created by $timeout(). (Not required). After calling cancel(), this promise object will be rejected.

Return value: If the callback of $timeout() has not been executed yet, it will be cancelled successfully. Return true

Here is a simple test:

   var timeoutApp = ('timeoutApp',[]);
   (function($timeout){
     var a = $timeout(function(){
       ('Execute $timeout callback');
       return 'angular'
     },1000);
     (function(data){
       (data)
     },function(data){
       (data)
     });
     //$(a);
   })

After running, I see the console print:

Execute $timeout callback
angular

If I open the comment and execute the .cancel() method, then the $timeout callback will not be executed, and the promise it returns is rejected and printed by the console:

canceled

Here is a very practical demo: Delay drop-down menu: When the mouse is placed on the button, the drop-down menu will be displayed for 500 milliseconds. When the mouse leaves the button, the drop-down menu will be hidden by 500 milliseconds. If the mouse enters the drop-down menu, the drop-down menu will not be hidden. If the mouse leaves the drop-down menu, the drop-down menu will be hidden by 500 milliseconds. If the mouse enters the button, the drop-down menu will still not be hidden.

html:

<!DOCTYPE html>
<html ng-app="timeoutApp">
<head>
  <title>$timeoutServe</title>
  <meta charset="utf-8">
  <link rel="stylesheet" href="../" rel="external nofollow" />
  <script src="../"></script>
  <script src=""></script>
  <style type="text/css">
  * {
   font-family:'MICROSOFT YAHEI'
  }
  </style>
</head>
<body >

 <div ng-controller="myCtrl">
   <div class="dropdown" dropdown >
     <button class="btn btn-default dropdown-toggle" type="button" ng-mouseenter = "showMenu()" ng-mouseleave = "hideMenu()">
       Dropdown
       <span class="caret"></span>
     </button>
     <ul class="dropdown-menu" ng-show="ifShowMenu" ng-mouseenter = "showMenu()" ng-mouseleave = "hideMenu()">
       <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Action</a></li>
       <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Another action</a></li>
       <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Something else here</a></li>
       <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Separated link</a></li>
     </ul>
   </div>
 </div>

</body>
</html>

js: 

var timeoutApp = ('timeoutApp',[]);
('myCtrl',function($scope){
  $ = false;
});
('dropdown',function($timeout){
  return {
    restrict:"EA",
    link:function(scope,iele,iattr){
       = function(){
        $(scope.t2);
        scope.t1 = $timeout(function(){
           = true
        },500)
      };
       = function(){
        $(scope.t1);
        scope.t2 = $timeout(function(){
           = false
        },500)
      };
    }
  }
})

The code should be easy to understand: when entering the button and entering the ul drop-down menu, a timeout callback is defined (the drop-down menu will be displayed after 500 milliseconds), and the callback to hide the drop-down menu is cancelled. The opposite is true when leaving the button and ul.

Code address:/OOP-Code-Bunny/angular/tree/master/%24timeout

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.