AngularJS:使用$timeout来消除延迟

如果$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

您必须在重新启动它之前清除超时，如下所示:

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

参见工作活塞

这个plunk有几个问题。

首先，这里没有理由使用ng-model。只要把它设置为一个作用域变量，因为你是在从控制器编辑它。

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

可以考虑使用mouseenter和mouselleave，并确保取消旧的超时。

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

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

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