如何延迟AngularJS即时搜索？

一尘不染

如何延迟AngularJS即时搜索？

angularjs

我有一个似乎无法解决的性能问题。我有一个即时搜索功能，但是有点麻烦，因为它开始在每个位置上搜索keyup()。

JS：

var App = angular.module('App', []);

App.controller('DisplayController', function($scope, $http) {
$http.get('data.json').then(function(result){
    $scope.entries = result.data;
});
});

HTML：

<input id="searchText" type="search" placeholder="live search..." ng-model="searchText" />
<div class="entry" ng-repeat="entry in entries | filter:searchText">
<span>{{entry.content}}</span>
</div>

JSON数据甚至没有那么大，只有300KB，我认为我需要完成的是在搜索上放置〜1秒的延迟，以等待用户完成键入操作，而不是对每个按键执行操作。AngularJS在内部执行此操作，在阅读了文档和此处的其他主题之后，我找不到特定的答案。

我将不胜感激如何延迟即时搜索的任何指示。

阅读 211

2020-07-04

共1个答案

一尘不染

（有关Angular 1.3解决方案，请参见下面的答案。）

这里的问题是，每次模型更改时都将执行搜索，这是对输入的每次键入操作。

会有更清洁的方法来执行此操作，但是最简单的方法可能是切换绑定，以便在您的Controller上定义了一个$
scope属性，您可以在其中运行过滤器。这样，您可以控制$ scope变量的更新频率。像这样：

JS：

var App = angular.module('App', []);

App.controller('DisplayController', function($scope, $http, $timeout) {
    $http.get('data.json').then(function(result){
        $scope.entries = result.data;
    });

    // This is what you will bind the filter to
    $scope.filterText = '';

    // Instantiate these variables outside the watch
    var tempFilterText = '',
        filterTextTimeout;
    $scope.$watch('searchText', function (val) {
        if (filterTextTimeout) $timeout.cancel(filterTextTimeout);

        tempFilterText = val;
        filterTextTimeout = $timeout(function() {
            $scope.filterText = tempFilterText;
        }, 250); // delay 250 ms
    })
});

HTML：

<input id="searchText" type="search" placeholder="live search..." ng-model="searchText" />
<div class="entry" ng-repeat="entry in entries | filter:filterText">
    <span>{{entry.content}}</span>
</div>

2020-07-04