Question

当鼠标在.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

Answer 1

您需要在重新启动之前清除超时，如下所示：

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

myApp.controller('myController', function($scope, $timeout) {
    $scope.timeout;
    $scope.myToggle = function() {
        $scope.loading = true;

        window.clearTimeout($scope.timeout);
        $scope.timeout = window.setTimeout(function() {
            $scope.$apply(function() {
                $scope.loading = false;
            });
        }, 3000);
    }
});

请参阅working Plunker

Answer 2

如果$ timeout已经在运行，你可以在重启之前取消它。

Dim ids as list(of string) = request.form.allkeys.Where(function (key).key).Contains("I'd").ToList()

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

Answer 3

这个插件有几个问题。

首先，没有理由在这里使用ng-model。只需将其设置为范围变量，无论如何都要从控制器进行编辑。

其次，mousemove将连续执行。每次移动鼠标时，它都会创建一个新的超时，并且它不会取消旧的超时。这就是它闪烁的原因。调用此函数并且不断调用$timeout.cancel()和$timeout(function() { }, 3000)也是非常低效的。

相反，请考虑使用mouseenter和mouseleave，并确保取消旧的超时。

<强> HTML

<div ng-app="myApp" ng-controller="myController">
  <div class="mousemove" ng-mouseenter="enter()" ng-mouseleave="leave()"></div>
  <div class="show" ng-show="loading"></div>
</div>

<强>的Javascript

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

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

  var timeoutCanceller = null;

  $scope.loading = false;

  $scope.enter = function() {
    cancelTimeout();
    $scope.loading = true;
  };

  $scope.leave = function() {
    timeoutCanceller = $timeout(function() {
      $scope.loading = false;
    }, 3000);
  };

  function cancelTimeout() {
    if (timeoutCanceller) $timeout.cancel(timeoutCanceller);
  }
});

Here is a working demo.

编辑：将这些事件绑定到父容器而不是直接绑定到元素上也是个好主意。如果该加载器是一个叠加层，那么可能会意外地调用mouseleave事件。还为您提供了更多样式选项。

<div ng-app="myApp" ng-controller="myController">
  <div ng-mouseenter="enter()" ng-mouseleave="leave()">
    <div class="mousemove"></div>
    <div class="show" ng-show="loading"></div>
  </div>
</div>

AngularJS：延迟消失，$ timeout

3 个答案: