Остановка таймаута $- AngularJS

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);


  };

});

Когда я нажимаю кнопку, появляется всплывающее диалоговое окно. Когда я нажимаю, всплывающее диалоговое окно будет скрыто через две секунды. Проблема возникает, когда я нажимаю кнопку мыши во второй раз. Даже мой курсор все еще находится на кнопке, всплывающее диалоговое окно скрывается за две секунды. Как остановить таймер, когда мышь снова на кнопке?

ОТВЕТЫ

Ответ 1

Служба $timeout возвращает обещание, которое можно отменить с помощью $timeout.cancel(). В вашем случае вам нужно отменить тайм-аут при каждом нажатии кнопки.

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);
  };

});