Question

似乎无法谷歌了解如何做到这一点。

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

我知道如何使用keyup事件在JQuery中执行它，并且可能使它以这种方式工作，但是想要“Angular Way”。

修改

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

Answer 1

这种方式有ng-model-options

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

callDelayed方法仅在键入最后一个字符或模糊

500毫秒后调用

以下是文档https://docs.angularjs.org/api/ng/directive/ngModelOptions

Answer 2

对于angular方法，可以在控制器中将$timeout作为依赖项注入，并在$watch中指定的范围变量上使用ng-model。

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

Answer 3

虽然@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变量污染控制器范围。在这种情况下，它们在本地函数范围中定义。

<强> [UPDATE]

我还发现了一个名为angular-debounce的有趣AngularJS项目，它可以很容易地实现相同的效果。使用debounce指令可以像这样对模型进行建模：

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

AngularJS中文本框更改时调用延迟函数

3 个答案: