如何延迟 AngularJS 即时搜索? [英] How to put a delay on AngularJS instant search?

问题描述

我有一个似乎无法解决的性能问题.我有一个即时搜索，但它有点滞后，因为它开始搜索每个 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:

<div class="entry" ng-repeat="entry in entry | filter:searchText"><span>{{entry.content}}</span>

JSON 数据甚至没有那么大，只有 300KB，我认为我需要完成的是将搜索延迟约 1 秒以等待用户完成输入，而不是在每次击键.AngularJS 在内部执行此操作，在阅读了此处的文档和其他主题后，我找不到具体的答案.

如果您有任何关于如何延迟即时搜索的指示，我将不胜感激.

解决方案

(有关 Angular 1.3 解决方案，请参阅下面的答案.)

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

有更简洁的方法可以做到这一点，但可能最简单的方法是切换绑定，以便您在控制器中定义一个 $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;});//这就是你将过滤器绑定到的$scope.filterText = '';//在 watch 之外实例化这些变量var tempFilterText = '',过滤文本超时；$scope.$watch('searchText', function (val) {if (filterTextTimeout) $timeout.cancel(filterTextTimeout);tempFilterText = val;filterTextTimeout = $timeout(function() {$scope.filterText = tempFilterText;}, 250);//延迟 250 毫秒})});

HTML:

<div class="entry" ng-repeat="条目中的条目 | filter:filterText"><span>{{entry.content}}</span>

I have a performance issue that I can't seem to address. I have an instant search but it's somewhat laggy, since it starts searching on each 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>

The JSON data isn't even that large, 300KB only, I think what I need to accomplish is to put a delay of ~1 sec on the search to wait for the user to finish typing, instead of performing the action on each keystroke. AngularJS does this internally, and after reading docs and other topics on here I couldn't find a specific answer.

I would appreciate any pointers on how I can delay the instant search.

解决方案

(See answer below for a Angular 1.3 solution.)

The issue here is that the search will execute every time the model changes, which is every keyup action on an input.

There would be cleaner ways to do this, but probably the easiest way would be to switch the binding so that you have a $scope property defined inside your Controller on which your filter operates. That way you can control how frequently that $scope variable is updated. Something like this:

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>

这篇关于如何延迟 AngularJS 即时搜索?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！