当AngularJS中文本框发生变化时，调用带有延迟的函数

Call Function with Delay When Textbox Changes in AngularJS

本文关键字：调用 延迟 函数 变化 中文 AngularJS 文本      更新时间：2023-09-26

似乎找不到这样做的例子。

我已经成功地创建了一个文本框，每次它改变时调用一个函数。我想做的是只在用户停止输入x毫秒时调用该函数。

我知道如何在JQuery中使用keyup事件来实现它，并且可能会让它以这种方式工作，但我想用"Angular的方式"来实现它。

编辑

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

有这种方式的ng-model-options 

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

callDelayed方法只在键入最后一个字符或blur

后500 ms后调用

这里是文档https://docs.angularjs.org/api/ng/directive/ngModelOptions

对于角化方法，可以在控制器中注入$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);

也许有必要指出为什么使用自执行匿名函数。主要原因是不让time和delay变量污染控制器范围。在这种情况下，它们是在局部函数作用域中定义的。

(更新)

我还发现了一个有趣的AngularJS项目angular-debounce，它可以很容易地实现同样的效果。使用debounce指令可以像这样处理模型更新: 
<input type="text" ng-model="delayedModel" debounce="500"></input>
相关文章：