javascript - 消除 ng-keypress 的抖动

Question

有人可以指导我以 Angular 方式消除按键事件吗？我无法让它反跳。我肯定知道，因为我正在使用 $log.debug 打印出按下的按键，并且它触发的次数并不等于去抖率。

我是这样设置的:

<div ng-keypress="doSomething"></div>

在我的 Controller 中(并不是说我已包含 underscore.js 以在本例中利用其 debounce 方法):

...
$scope.doSomething = function(event, keyEvent) {
    var keypressed = String.fromCharCode(keyEvent.which).toUpperCase();
    _.debounce(handleKeyPress(keypressed), 500);
}

function handleKeyPress(keypressed) {
    //do something with the keypress
}

感谢您提前提供的帮助。

Answer 1

尝试以下代码:

$scope.doSomething = _.debounce(function(event, keyEvent) {
    $scope.$apply(function() {
    // Do something here
    });
}, 500);

Working Plunker

正如@Enzey所说，_.debounce()返回一个“去抖”函数，需要在某个地方调用它才能产生任何效果。并且您需要调用 $apply() 才能触发摘要周期。否则，在去抖动函数中对模型所做的任何更改都不会更新 View 。

更新

事实证明，OP 真正想要的是一个节流功能。下面是使用 _.throttle() 的另一个代码片段:

$scope.doSomething = _.throttle(function($event) {
    if ($scope.$$phase) return; // Prevents 'digest already in progress' errors

    $scope.$apply(function() {
        // Do something here
    });
}, 100);