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


  };

});

当我将鼠标悬停在按钮上时,将显示一个弹出对话框。当我将鼠标移出时,弹出对话框将在两秒钟内隐藏。问题是当我第二次将鼠标悬停在按钮上时。甚至我的光标仍在按钮上,弹出对话框在两秒钟内隐藏起来。当鼠标再次位于按钮上方时,如何停止计时器?

最佳答案

$timeout 服务返回可以使用 $timeout.cancel() 取消的promise。在您的情况下,您必须取消鼠标悬停时的超时。
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);
  };

});

07-24 09:38
查看更多