计算事件然后使用油门/去抖动来执行事件

时间:2017-03-27 12:21:37

标签: javascript angularjs underscore.js

如何在角度中使用下划线油门/去抖动来计算事件触发的x次。然后在一定间隔之后用x?

的知识触发事件

HTML

<div ng-app ng-controller="testC">
    <input type="submit" ng-click="add()" value="add"></input>
    {{counter}}
</div>

JS

function testC($scope) {
    $scope.counter = 0;
    $scope.add = function () {
        $scope.counter++;
    }

    /*

        counter x-timed add has triggered
      after interval has been reached trigger a event that does $scope.counter = $scope.counter + x

   */
}

https://jsfiddle.net/6w747zzL/

1 个答案:

答案 0 :(得分:1)

正如我在评论中所写,你使用油门来调用重负荷&#34;每X毫秒运行一次,所以你就是这样做的:

<div ng-app ng-controller="testC">
    <input type="submit" ng-click="add()" value="add">
    counter: {{counter}} <br>
    throttle: {{ throttle }}<br>
    non-throttle: {{ nonthrottle }}
</div>

function testC($scope, $timeout) {
   $scope.counter = 0;
   $scope.add = function () {
        $scope.counter++;
   }

   $scope.throttle = 0;
   $scope.$watch('counter', _.throttle(function(value) {
        // Wrapping this in '$timeout' will ensure a digest cycle execute that will update the view (Since underscore is not native angular function)
        $timeout(function() {
             $scope.throttle++;
        });
   }, 500));

   $scope.nonthrottle = 0;
   $scope.$watch('counter', function(value) {
     $scope.nonthrottle++;
   });
}

你应该快速点击按钮,你会发现每次点击按钮时油门观察者都不会更新,但每500毫秒只能更新一次。

工作示例:https://jsfiddle.net/6w747zzL/2/