Question

用于过滤记录的角度构建指令中的键盘，但是我想延迟函数调用，以便用户可以输入完整的单词，并且可以调用DB来获取记录而不是单个单词。我的代码行是

  <input ng-show="!$scope.noRPData" type="text" ng-keyup="filterRP($event)" class="filterRP form-control" id="txtFilterID" ng-model="rpFilter.ModifiedDate.value" />

filterRP是我想将呼叫延迟4秒的函数。请建议

Answer 1

我建议使用ng-change代替ng-keyup。您可以添加ng-model-options并在那里配置debounce时间。然后，只有在去抖动时间段过后，您的模型才会更改。请参阅Debouncing updates文档部分。

<强>更新 ng-change和$scope.$watch都应使用ng-model-options debounce选项（在AngularJS v1.6.10中）。见Plunker

Answer 2

您需要使用$timeout延迟它（使用额外的if语句，以防止每次按下键时调用）。然后使用$http.post请求在该超时内发送一些数据。这是一个简单的演示，您可以为您的示例采用：

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $timeout, $http) {
  var typing = false;
  $scope.filterRP = function(e) {
    if (!typing) {
      typing = true;
      $timeout(function() {
        typing = false;
        console.log("sending", $scope.x);
        /*
        var data = {"input":$scope.x}
        $http.post(url,data).
        then(function(response){
        	// do something with response.data;
        },function(error){
        	// log error
        });
        */
      }, 4000) // 4 second delay
    }
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>

<div ng-app="myApp" ng-controller="myCtrl">
  <input type="text" ng-keyup="filterRP($event)" ng-model="x" />
</div>

如何在angular JS中延迟ng-keyup调用

2 个答案: