按键去抖动

Question

有没有人对我在 angular 中消除按键事件有任何指示？我无法让它去抖动。而且我肯定知道，因为我正在使用 $log.debug 打印出按下的键，并且它触发的次数不是去抖动率。

我是这样设置的：

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

并且在我的控制器中（不是我已经包含 underscore.js 以在这种情况下使用它的去抖动方法）：

...
$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() returns 一个 "debounced" 函数，需要在某处调用才能产生任何效果。您需要调用 $apply() 才能触发摘要循环。否则在 debounced 函数中对模型所做的任何更改都不会更新视图。

更新

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

的代码片段

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

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

按键去抖动

Debouncing ng-keypress

javascript

keypress

underscore.js

angularjs

debouncing