在 angularjs 中为 ng-keyup 添加延迟答案

【问题标题】：add delay to ng-keyup in angularjs在 angularjs 中为 ng-keyup 添加延迟
【发布时间】：2019-03-14 22:30:19
【问题描述】：

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

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

此函数更新画布上的文本并执行更多操作，需要 2-3 秒。

虽然以很小的延迟（慢）键入每个字母，但通过快速键入会导致画布数据覆盖。

是否可以在 keyup 上添加延迟执行功能？

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

我想添加一个延迟，这样如果用户在交易中进入了Hell，Hell这个词将被一起处理，而不是每个字母。

【问题讨论】：

$scope.updateTextLogo= function() { if ($scope.logoText.text >= 4) executeSomething() };
嘿，我刚刚以上面的测试为例。用户不受字母数量的限制。我只想在一些延迟后调用该函数。就像如果用户只输入 H 然后等待 2 秒，该函数将被调用。
嘿，我找到了这个 plunkr。 plnkr.co/edit/HfPDC4veoW9KlVrC7Tly?p=preview.

标签： javascript angularjs

【解决方案1】：

如果您使用的是 angular 1.3 或更高版本，则您在 ng-model-options 中有 debounce。

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

去抖动会影响范围变量的赋值。

【讨论】：

嘿，我的是 1.2.7。 1.3以下的版本怎么办？

【解决方案2】：

您可以使用 $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...
}

【讨论】：