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

Дебютные/дросселированные обновления модели для 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-амперной ).

0
добавлено
Это уже через год, но могу ли я также рекомендовать этот отличный угловой сервис отклонений ?
добавлено автор oakfish56, источник
JavaScript Jobs — чат
JavaScript Jobs — чат
8 336 участник(ов)

JavaScript Jobs — чат для поиска работы и людей Правила оформления: https://teletype.in/@telegram-ru/r1WQe5F1m См. также: @mobile_jobs, @devops_jobs, @nodejs_jobs, @react_js, @angular_ru, @js_ru

JavaScript.ru
JavaScript.ru
7 932 участник(ов)

Сообщество сайта JavaScript.ru в Slack.

SEO chat
SEO chat
5 476 участник(ов)

Чат про SEO. Speak Russian! Др.чаты: @ppcchat @uiux_chat @devschat @smmhell Работа: @seohr Канал: @seolife Аудит: tpv.sr/1QoBSBb Стата: tpv.sr/1QoBMrK/ Запрещено: - мат и брань - команды ботам - реклама, вакансии - религия, политика, наркота, крипта

pro.js
pro.js
4 675 участник(ов)

Про JavaScript и NodeJS Invite: https://t.me/joinchat/Be4rsT5Rsgq30DHutjxXgA Правила: http://telegra.ph/ru-chat-rules-06-19 Вакансии только с ЗП, не чаще раза в неделю.

Angular — русскоговорящее сообщество
Angular — русскоговорящее сообщество
3 960 участник(ов)

Общаемся на темы Angular 4+, его экосистемы, TypeScript, NativeScript и т.д. По вопросам SSR, Angular Universal @angular_universal_ru См. также: @typescript_ru, @react_js, @nodejs_ru, @js_ru Вакансии и поиск работы: @javascript_jobs

Верстка сайтов HTML/CSS/JS/PHP
Верстка сайтов HTML/CSS/JS/PHP
3 439 участник(ов)

Правила группы: напишите !rules в чате. Группа Вк: vk.com/web_structure Freelancer: @web_fl Веб Дизайн: @dev_design Маркетолог: @topmarkening Автор: @M_Boroda

JavaScript — русскоговорящее сообщество
JavaScript — русскоговорящее сообщество
3 269 участник(ов)

Рекомендуем сразу отключить уведомления Правила: https://rudevs.network/ByaMH6un7 См. также: @js_noobs_ru, @nodejs_ru, @typescript_ru, @react_js, @electron_ru Вакансии и поиск работы: @javascript_jobs

JavaScript Noobs — сообщество новичков
JavaScript Noobs — сообщество новичков
2 484 участник(ов)

Чат для новичков

javascript_ru
javascript_ru
915 участник(ов)

Сообщество любителей самого популярного языка программирования в мире. Чат основан в 2009 году. Логи: https://goo.gl/9EOeM7 Поддержка бота: @chat_linker (ссылка на репу внутри) Вам будут интересны @frontend_ru и @css_ru

Angular.js (1.x) — русскоговорящее сообщество
Angular.js (1.x) — русскоговорящее сообщество
704 участник(ов)

Общаемся и обсуждаем темы, посвященные Angular 1.x и экосистеме.

jsChat
jsChat
603 участник(ов)

Чат посвященный программированию на языке javaScript Перед отправкой ссылки на Ваш контент посоветуйтесь с админом Все ссылки удаляются ботом автоматически

JavaScript for Zombies Chat
JavaScript for Zombies Chat
492 участник(ов)

Чат про JavaScript для настоящих zombie! Вход строго по приглашениям! Ссылка для строгих приглашений: https://t.me/joinchat/AAMBHz3Uyr0tuZ7VaB029g

All That JS
All That JS
417 участник(ов)

JS на русском

AngularJS, Javascript
AngularJS, Javascript
370 участник(ов)

Angularjs russian chat