Stopping the $timeout - AngularJS

Question

var app = angular.module('myapp', []);

app.controller('PopupCtrl', function($scope, $timeout){
$scope.show = 'none';


  $scope.mouseover = function(){
    console.log('Mouse Enter');
    $scope.show = 'block';
  };

  $scope.mouseout = function(){

       console.log('Mouse Leave');
        var timer = $timeout(function () {
          $scope.show = 'none';
        }, 2000);


  };

});

When I mouseover a button, a pop up dialog box is show. When I mouseout, the pop up dialog box is going to be hidden in two seconds. The problem come when I mouseover the button for the second time. Even my cursor is still on the button, the pop up dialog box is hide in two second. How to stop the timer when the mouse is over the button again?

Answer 1

The $timeout service returns a promise that can be cancelled using $timeout.cancel(). In your case, you have to cancel the timeout in every button mouse over.

DEMO

JAVASCRIPT

var app = angular.module('myapp', []);

app.controller('PopupCtrl', function($scope, $timeout){
  var timer;
  $scope.show = false;

  $scope.mouseover = function(){
    $timeout.cancel(timer);
    $scope.show = true;
  };

  $scope.mouseout = function(){
    timer = $timeout(function () {
      $scope.show = false;
    }, 2000);
  };

});