Question

我们假设我的ng模型有一些输入

<input type="text" ng-model="vm.man.name">
<input type="text" ng-model="vm.man.surName">

在我的控制器中，我有对象vm.man={};。我想做以下事情：我想把$ watch放在vm.man上，所以，如果我按下<input>内的某个键，它应该等待3秒，然后将响应发送到服务器。但是，如果我按下某个键，并且在3秒内我按下另一个键，它应该等待3秒然后响应服务器。这是我已经做过的事情：

 $scope.$watch(()=>vm.man, function (newVal, oldVal) {
     if(angular.isUndefined(newVal)) {
         return console.log("newVal is Undefined")
     }else{
        vm.timer1= $timeout(function () {
         vm.someFunctionThatRespondsToServer();
         }, 3000);
     }
 }, true);

我现在遇到的问题是，它会为每个按键创建响应。例如，我在我的a中按了input它会响应a，然后我按b它会响应ab等等。我希望得到这样的结果：如果没有其他按键，我按下a它会等待3秒，它会响应，或者我按下a然后在2秒之后，我会按下{{1}如果在3秒内没有其他按键，则等待3秒然后响应b。提前谢谢。

Answer 1

在Angular 1/2中，您可以使用Lodash debounce中的函数。以下是链接和示例：https://lodash.com/docs/4.17.4#debounce

在Angular 2 RC5及更新版本中，您可以使用debounceTime。更多细节在这里 Angular and debounce

Answer 2

内置功能。您希望为与ng模型关联的输入添加去抖动。您可以通过添加名为ng-model-options的属性来专门执行此操作。以下应该有效：

<input type="text" ng-model="vm.man.name" ng-model-options="{debounce: 200}">
<input type="text" ng-model="vm.man.surName" ng-model-options="{debounce: 200}">

在更新模型之前，这会增加200ms去抖（延迟）。执行此操作后，您可以在监视功能中删除该超时。您还可以使用ng-model-options使用其他一些属性。 Go here了解更多信息。

杀死$ timeout并在每次按键后重置

2 个答案: