去抖动 ng-keypress答案

【问题标题】：Debouncing ng-keypress去抖动 ng-keypress
【发布时间】：2015-06-28 00:54:48
【问题描述】：

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

我是这样设置的：

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

在我的控制器中（不是我在这个实例中包含了 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
}

提前感谢您的帮助。

【问题讨论】：

它触发的次数不是去抖动率是什么意思？
调用_.debounce(handleKeyPress(keypressed), 500); 时，您正在解析handleKeyPress(keypressed) 并将结果传递给去抖动。您应该传递一个可以调用的函数。比如：var bounceable = function() {handleKeyPress(keypressed)}_.debounce(bounceable, 500);
嗨 Enzey，这很有意义。我已经应用了它，但它没有运行。我也没有收到任何错误。我尝试在 debounce 函数中放置一个 console.log 语句，它甚至没有调用它。

标签： javascript angularjs underscore.js keypress debouncing

【解决方案1】：

试试下面的代码：

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

Working Plunker

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

更新

事实证明，OP 真正想要的是一个节流函数。下面是另一个使用_.throttle()的代码sn-p：

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

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

【讨论】：

这非常接近。我玩过你的 plunkr 代码，并将延迟设置为 100 毫秒。如果你在一个字母上保持按键一秒钟，你应该得到大约 10 个相同字母的打印。但你没有。有什么想法吗？
@JohnFu 你似乎把debounce 和throttle 混淆了。 debounced 函数只有在指定的延迟内没有被再次调用时才会被执行。另一方面，throttled 函数每 X 毫秒最多执行一次。我将更新 plunker 以显示两者。如果这就是你想要的，请告诉我，我会更新我的答案。
非常感谢。我不知道，这是有道理的。你每天都能学到新东西。