AngularJS:$ timeout的延迟消失

霍尔顿

当鼠标在.mousemove DIV上移动时,将显示.show DIV,然后,如果鼠标在3秒钟内未移动,则.show DIV将消失。

<div class="mousemove" ng-mousemove="myToggle()" ng-model="loading" ></div>
<div class="show" ng-show="loading"></div>

$scope.myToggle = function() {
    $scope.loading = true; 
    $timeout(
        function() {
            $scope.loading = false;
        }, 
    3000);
}

我做了些什么,但是当我不断在.mousemove DIV上移动鼠标时,.show DIV会闪烁。该怎么办,我是AngularJS的新手。这是我的演示:http : //embed.plnkr.co/WbhqAQ4JJvOfuCN4tI3I/preview

罗伯·施穆克(Rob Schmuecker)

如果$ timeout已经在运行,则可以在重新启动之前取消它。

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

myApp.controller('myController', function($scope, $timeout) {

    $scope.myToggle = function() {
      // Check to see if there already is a $scope.loading timer
      if($scope.loading){
        // if there is then use the $timeout.cancel() method
        $timeout.cancel($scope.loading);
      }
      // Initialize the $timeout into the $scope.loading propert
      $scope.loading = $timeout(
        function() {
          $scope.loading = false;
      }, 3000);
    }
});

演示:http : //embed.plnkr.co/WbqGbFG9JTVNXJW970l8/preview

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章