AngularJS Мгновенный поиск Невероятно лагги

Question

AngularJS Мгновенный поиск Невероятно лагги

В настоящее время я работаю над базой данных с веб-интерфейсом. Используя jQuery для предыдущих версий этого проекта, я теперь перешел на использование AngularJS для функции «мгновенного поиска», например:

function SearchCtrl($scope, $http) {
    $scope.search = function() {  
    $scope.result = null;

    $http({method: 'GET', url: 'api/items/search/' + $scope.keywords }).
        success(function(data, status, headers, config) {
            $scope.result = data;
        }).
        error(function(data, status, headers, config) {
            $scope.status = status;
        });     
    };
}

...
<div id="searchControl" ng-controller="SearchCtrl">
    <form method="get" action="" class="searchForm">
        <input type="text" id="search" name="search" ng-model="keywords" ng-change="search()"/>
        <input type="submit" value="Search" />
    </form>
    <div ng-model="result">
        
            <div class="card">
                Item ID: {{items.id}}

                Part ID: {{items.part_id}}

                Description: {{items.description}}

                Manufacturer: {{items.manufacturer}}

                Range: {{items.product_range}}

                Borrower: {{items.borrower}}

                End Date: {{items.end_date}}

            </div>
        
    </div>
</div>
...

Это отлично работает, но с одной проблемой: потому что я вызываю функцию поиска на «ng-change», она очень лагирует при вводе поискового запроса, иногда сбой браузера. В старой версии (с использованием jQuery) я использовал флаги, чтобы проверить, был ли уже запущен запрос на получение, и если я тогда прервал его, прежде чем запускать новый. Я просмотрел документацию AngularJS для прерывания запросов на получение, но я все еще не мудрее. Если у кого-нибудь есть какие-то советы о том, как достичь этого или другого исправления, я бы очень признателен.

Благодарю.

0

добавлено 07 Февраль 2013 в 11:54 автор Tom P.

Просмотры: 3

источник

nl ja de

Если мой ответ вам подходит, я бы рекомендовал изменить заголовок вашего вопроса на что-то вроде «AngularJS - Как прервать обработку запроса $ http?»? Поэтому другие люди могут найти ответ, если у них будет такая же проблема.

добавлено 07 Февраль 2013 в 01:08, автор Ben Lesh, источник

2 ответы

Well once the get request is sent, it's sent. AFAIK, there's not yet a way to abort processing the result of an http request native to angular. Here's a feature request that is currently labelled as "OPEN": https://github.com/angular/angular.js/issues/1159

Тем не менее, вы можете отменить обработку ответа самостоятельно следующим образом:

var currentKey= 0;

$scope.test = function (){
   $http({ method: 'GET', url: 'test.json', key: ++currentKey })
      .success(function(data, status, headers, config) {
         if(config.key == currentKey) {
           //You're now inside your most recent call.
           $scope.foo = data;
         }
      });
};

С другой стороны, я бы рекомендовал реализовать тайм-аут какого-то события на вашем событии с изменением, чтобы он не был слишком «болтливым».

2

добавлено 07 Февраль 2013 в 01:06 автор Ben Lesh

источник

Видеокурс по Java для начинающих

Получи видеокурс по Java для начинающих с упражнениями

автор lgersman · Answer 1 · 2013-08-15T01:18Z

Дебютные/дросселированные обновления модели для angularjs будут полезны в вашем случае: http://jsfiddle.net/lgersman/ vPsGb/3/

Директива примера приведет к изменению событий изменения, так что будут выполняться меньшие запросы ajax.

Больше нечего делать, чем использовать директиву в коде jsfiddle следующим образом:

<input 
    type="text" 
    id="search" 
    name="search" 
    ng-model="keywords" 
    ng-change="search()"
    ng-ampere-debounce
/>

Его в основном небольшой фрагмент кода, состоящий из одной угловой директивы, называемой «ng-ampere-debounce», с использованием http://benalman.com/projects/jquery-throttle-debounce-plugin/ , которые могут быть прикреплены к любому элементу dom. Директива переупорядочивает подключенные обработчики событий, чтобы она могла контролировать, когда дросселировать события.

Вы можете использовать его для дросселирования/debouncing * угловые обновления модели * обработчик углового события ng- [event] * обработчики событий jquery

Посмотрите: http://jsfiddle.net/lgersman/vPsGb/3/

Директива будет частью рамки Orangevolt Ampere ( https://github.com/lgersman/jquery. orangevolt-амперной ).