使用AngularJS在超快速键盘和keydown事件上调用函数

时间:2015-02-12 13:27:19

标签: javascript angularjs angularjs-scope

我的控制器中有这个功能,可以在我的控制器中触发搜索功能进行搜索。

$scope.fetchScannedData = function () {
    $timeout.cancel(fetchScannedDataTimer);
    fetchScannedDataTimer = $timeout(function () {
        $scope.search(); // do search with 5 second delay
    }, fetchScannedDataDelay);
};

这是我的输入字段:

 <input type="text" class="form-control" ng-enter="search()" placeholder="Enter Search ID" ng-change="fetchScannedData()" ng-model="id">

(请注意我的表单字段上的ng-change指令触发5秒延迟)

我的问题是如何编辑这个delayScannedData函数,以便只有当输入的文本由非人类(条形码扫描)快速输入时才会触发延迟,但是当输入的文本是通过人类输入完成时没有延迟?

1 个答案:

答案 0 :(得分:1)

我建议在辩论中包装你的电话:

https://lodash.com/docs#debounce

如果更改代码结构甚至更容易,可以使用Angular 1.3 ngModelOptions:

https://docs.angularjs.org/api/ng/directive/ngModelOptions

通过改变结构,我的意思是,而不是你拥有的东西:

$scope.searchParams = {};

$scope.$watch('searchParams.query', function(newVal, oldVal){
   if(newVal !== oldVal){
      $scope.fetchScannedData();
   }
});

$scope.fetchScannedData = function () {
    $timeout.cancel(fetchScannedDataTimer);
    fetchScannedDataTimer = $timeout(function () {
        $scope.search(); // do search with 5 second delay
    }, fetchScannedDataDelay);
};

 <input type="text" class="form-control" ng-enter="search()" placeholder="Enter Search ID" ng-model="searchParams.query" ng-model-options="{ debounce: 1000 }">

不确定您的search()方法是什么样的,但您需要确保将其更改为指向searchParams.query字符串。

我认为这种方法会更加“角色”。而不是你正在服用的那个。