Javascript 当文本框在AngularJS中发生更改时，使用延迟调用函数

似乎无法谷歌出一个如何做到这一点的例子

我已经成功创建了一个文本框，每次函数更改时都会调用它。我只想在用户停止键入x毫秒后调用该函数

我知道如何在JQuery中使用keyup事件来实现它，并且可能会使它以这种方式工作，但我想以“角度方式”实现它

编辑

---

也许从标签或文本中看不清楚，但我正在使用AngularJS，并希望使用该框架的正确方法来创建此延迟功能。

对于angular方法，可以在控制器中注入

$timeout

作为依赖项，并在

ng model

中指定的范围变量上使用

$watch

var timer=false;
$scope.ModelName='foo';
$scope.$watch('ModelName', function(){
  if(timer){
      $timeout.cancel(timer)
  }  
  timer= $timeout(function(){
      /* run code*/
   },delay)
});

---

虽然@charlietfl提供了完全可以接受的答案，但我想与您分享另一种不使用

$watch

方法的方法：

模板：

<input id="delayedModel" ng-model="delayedModel" ng-change="callDelayed()"/>

    (function (timer, delay) {
        $scope.callDelayed= function () {
            if(timer){
                $timeout.cancel(timer)
            }
            timer = $timeout(function(){

                /* run code*/

            }, delay)
        };
    })(false, 500);

也许有必要指出为什么使用自动执行匿名函数。主要原因是不使用

时间

和

延迟

变量污染控制器范围。在这种情况下，它们是在本地功能范围内定义的

[更新]

我还发现了一个有趣的AngularJS项目，名为，它使实现相同效果变得非常容易。使用

debounce

指令，可以进行如下模型更新：

<input type="text" ng-model="delayedModel" debounce="500"></input>

---

这种方式有

ng型号选项

<input id="delayedModel" ng-model="delayedModel" ng-change="callDelayed()" ng-model-options="{ updateOn: 'default blur', debounce: {'default': 500, 'blur': 0} }" />

callDelayed

方法仅在键入最后一个字符500毫秒后或在模糊时调用

---

这是文档

谢谢！我已经有了手表位，正在向我的控制器中注入$timeout（但不知道如何使用它），因此在30秒内就修复了它。

$timeout

返回一个承诺。。。我必须在文档中查找该部分，以了解如何使用

cancel（）

。如果不取消，会发生什么？因为它的setTimeout不是setInterval？@Vury当然需要取消承诺，但不确定

timer=$timeout（…

不会自动取消或不自动取消。文档确实说取消将触发承诺拒绝。我建议将计时器变量初始化为null，而不是false。我的IDE会抛出一个带有布尔值的警告。帮了我很多忙。谢谢！立即解决了它。应该是公认的答案