Question

在AngularJS应用程序中，我绑定到 ng-keyup 上的输入字段，以在每次输入字段的值更改时调用一个函数。

<input type="text" ng-model="logoText.text" ng-keyup="updateTextLogo();">

此功能更新画布上的文本，并执行一些其他操作，这些操作需要2-3秒。

通过快速键入可覆盖画布数据的结果来键入几乎没有延迟（缓慢）的每个字母都可以正常工作。

是否可以增加按键时执行功能的延迟时间？

例如，当前情况是，如果用户必须键入 Hello ，则会在每个字母上调用该函数。

我想添加一个延迟，以便如果用户在交易中输入了 Hell ，则将一起处理 Hell 单词，而不是每个字母。

Answer 1

您可以使用$ timeout服务：

<input type="text" ng-model="logoText.text" ng-keyup="triggerTimer();">

var timerStarted = false;
$scope.triggerTimer = function() {
  if(!timerStarted) {
    $timeout(updateTextLogo, 2000);
    timerStarted = true;
  }
}

函数updateTextLogo应该重置timerStarted标志，以便在出现更多字符时可以重新启动计时器。

var updateTextLogo = function() {
  timerStarted = false;
  // do stuff...
}

Answer 2

如果您使用的是Angle 1.3或更高版本，则在ng-model-options中会出现反跳现象。

<input type="text" ng-model="logoText.text" ng-model-options="{debounce: 1000}" ng-keyup="triggerTimer();">

去抖动会影响对范围变量的值分配。

在angularjs中为ng-keyup添加延迟

2 个答案: