Jak opóźnić wyszukiwanie natychmiastowe AngularJS?

Mam problem z wydajnością, którego nie mogę rozwiązać. Mam wyszukiwanie natychmiastowe, ale jest trochę opóźnione, ponieważ zaczyna szukać na każdymkeyup() .

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>

Dane JSON nie są nawet tak duże, tylko 300KB, myślę, że to, co muszę zrobić, to ustawić opóźnienie około 1 sekundy w wyszukiwaniu, aby poczekać, aż użytkownik skończy pisać, zamiast wykonywać akcję po każdym naciśnięciu klawisza. AngularJS robi to wewnętrznie i po przeczytaniu dokumentów i innych tematów na ten temat nie mogłem znaleźć konkretnej odpowiedzi.

Byłbym wdzięczny za wszelkie wskazówki, jak mogę opóźnić wyszukiwanie natychmiastowe.

(Zobacz odpowiedź poniżej dla rozwiązania Angular 1.3.)

Problem polega na tym, że wyszukiwanie będzie wykonywane za każdym razem, gdy model się zmieni, czyli przy każdej akcji klucza na wejściu.

Byłoby na to czystszy sposób, ale prawdopodobnie najłatwiejszym sposobem byłoby przełączenie powiązania tak, aby mieć zdefiniowaną właściwość $ scope wewnątrz kontrolera, na którym działa filtr. W ten sposób możesz kontrolować, jak często ta zmienna $ scope jest aktualizowana. Coś takiego:

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>

AKTUALIZACJA

Teraz jest to łatwiejsze niż kiedykolwiek (Angular 1.3), wystarczy dodać opcję odbicia w modelu.

<input type="text" ng-model="searchStr" ng-model-options="{debounce: 1000}">

Zaktualizowany plunker:
http://plnkr.co/edit/4V13gK

Dokumentacja na temat ngModelOptions:
https://docs.angularjs.org/api/ng/directive/ngModelOptions

Stara metoda:

Oto inna metoda bez zależności poza samym angularem.

Musisz ustawić limit czasu i porównać bieżący ciąg z poprzednią wersją, jeśli obie są takie same, wykonuje wyszukiwanie.

$scope.$watch('searchStr', function (tmpStr)
{
  if (!tmpStr || tmpStr.length == 0)
    return 0;
   $timeout(function() {

    // if searchStr is still the same..
    // go ahead and retrieve the data
    if (tmpStr === $scope.searchStr)
    {
      $http.get('//echo.jsontest.com/res/'+ tmpStr).success(function(data) {
        // update the textarea
        $scope.responseData = data.res; 
      });
    }
  }, 1000);
});

i to idzie do twojego widoku:

<input type="text" data-ng-model="searchStr">

<textarea> {{responseData}} </textarea>

Obowiązkowy plunker: http://plnkr.co/dAPmwf

W Angular 1.3 zrobiłbym to:

HTML:

<input ng-model="msg" ng-model-options="{debounce: 1000}">

Kontroler:

$scope.$watch('variableName', function(nVal, oVal) {
    if (nVal !== oVal) {
        myDebouncedFunction();
    }
});

Zasadniczo mówisz angularowi, aby działał myDebouncedFunction(), gdy msgzmienna zasięgu się zmienia. Atrybut ng-model-options="{debounce: 1000}"zapewnia, że msgaktualizacja może odbywać się tylko raz na sekundę.

 <input type="text"
    ng-model ="criteria.searchtext""  
    ng-model-options="{debounce: {'default': 1000, 'blur': 0}}"
    class="form-control" 
    placeholder="Search" >

Teraz możemy ustawić odbijanie opcji ng-model-options w czasie, a gdy rozmycie, model musi zostać natychmiast zmieniony, w przeciwnym razie po zapisaniu będzie miał starszą wartość, jeśli opóźnienie nie zostanie zakończone.

Dla tych, którzy używają keyup / keydown w znacznikach HTML. To nie używa zegarka.

JS

app.controller('SearchCtrl', function ($scope, $http, $timeout) {
  var promise = '';
  $scope.search = function() {
    if(promise){
      $timeout.cancel(promise);
    }
    promise = $timeout(function() {
    //ajax call goes here..
    },2000);
  };
});

HTML

<input type="search" autocomplete="off" ng-model="keywords" ng-keyup="search()" placeholder="Search...">

Odrzucone / ograniczone aktualizacje modelu dla angularjs: http://jsfiddle.net/lgersman/vPsGb/3/

W twoim przypadku nie pozostaje nic więcej do zrobienia niż użycie dyrektywy w kodzie jsfiddle w następujący sposób:

<input 
    id="searchText" 
    type="search" 
    placeholder="live search..." 
    ng-model="searchText" 
    ng-ampere-debounce
/>

Zasadniczo jest to mały fragment kodu składający się z pojedynczej dyrektywy kątowej o nazwie „ng-ampere-debounce” wykorzystującej http://benalman.com/projects/jquery-throttle-debounce-plugin/, który można dołączyć do dowolnego elementu dom. Dyrektywa zmienia kolejność dołączonych programów obsługi zdarzeń, dzięki czemu może kontrolować, kiedy ograniczać zdarzenia.

Możesz go użyć do dławienia / usuwania * aktualizacji kątowych modelu * obsługi zdarzeń kątowych ng- [zdarzenie] * obsługi zdarzeń jquery

Spójrz: http://jsfiddle.net/lgersman/vPsGb/3/

Dyrektywa będzie częścią struktury Orangevolt Ampere ( https://github.com/lgersman/jquery.orangevolt-ampere ).

Tylko dla użytkowników przekierowanych tutaj:

Jak przedstawiono w Angular 1.3, możesz użyć atrybutu ng-model-options :

<input 
       id="searchText" 
       type="search" 
       placeholder="live search..." 
       ng-model="searchText"
       ng-model-options="{ debounce: 250 }"
/>

Uważam, że najlepszym sposobem rozwiązania tego problemu jest użycie wtyczki jQuery throttle / debounce Bena Almana . Moim zdaniem nie ma potrzeby opóźniania wydarzeń z każdego pola w Twoim formularzu.

Po prostu opakuj funkcję obsługi $ scope. $ Watch w $ .debounce w następujący sposób:

$scope.$watch("searchText", $.debounce(1000, function() {
    console.log($scope.searchText);
}), true);

Innym rozwiązaniem jest dodanie funkcji opóźnienia do aktualizacji modelu. Wydaje się, że prosta dyrektywa działa:

app.directive('delayedModel', function() {
    return {
        scope: {
            model: '=delayedModel'
        },
        link: function(scope, element, attrs) {

            element.val(scope.model);

            scope.$watch('model', function(newVal, oldVal) {
                if (newVal !== oldVal) {
                    element.val(scope.model);        
                }
            });

            var timeout;
            element.on('keyup paste search', function() {
                clearTimeout(timeout);
                timeout = setTimeout(function() {
                    scope.model = element[0].value;
                    element.val(scope.model);
                    scope.$apply();
                }, attrs.delay || 500);
            });
        }
    };
});

Stosowanie:

<input delayed-model="searchText" data-delay="500" id="searchText" type="search" placeholder="live search..." />

Więc po prostu użyj delayed-modelzamiast ng-modeli zdefiniuj pożądane data-delay.

Demo: http://plnkr.co/edit/OmB4C3jtUD2Wjq5kzTSU?p=preview

Rozwiązałem ten problem za pomocą dyrektywy, która zasadniczo polega na wiązaniu rzeczywistego modelu ng ze specjalnym atrybutem, który obserwuję w dyrektywie, a następnie za pomocą usługi debounce aktualizuję atrybut dyrektywy, więc użytkownik obserwuje zmienną, która on wiąże się z modelem odbicia zamiast modelu ng.

.directive('debounceDelay', function ($compile, $debounce) {
return {
  replace: false,
  scope: {
    debounceModel: '='
  },
  link: function (scope, element, attr) {
    var delay= attr.debounceDelay;
    var applyFunc = function () {
      scope.debounceModel = scope.model;
    }
    scope.model = scope.debounceModel;
    scope.$watch('model', function(){
      $debounce(applyFunc, delay);
    });
    attr.$set('ngModel', 'model');
    element.removeAttr('debounce-delay'); // so the next $compile won't run it again!

   $compile(element)(scope);
  }
};
});

Stosowanie:

<input type="text" debounce-delay="1000" debounce-model="search"></input>

A w kontrolerze:

    $scope.search = "";
    $scope.$watch('search', function (newVal, oldVal) {
      if(newVal === oldVal){
        return;
      }else{ //do something meaningful }

Demo w jsfiddle: http://jsfiddle.net/6K7Kd/37/

usługę $ debounce można znaleźć tutaj: http://jsfiddle.net/Warspawn/6K7Kd/

Zainspirowany dyrektywą finalBind http://jsfiddle.net/fctZH/12/

Angular 1.3 będzie miał odbicie opcji ng-model-options, ale do tego czasu musisz używać timera, jak powiedział Josue Ibarra. Jednak w swoim kodzie uruchamia licznik czasu przy każdym naciśnięciu klawisza. Używa również setTimeout, kiedy w Angular trzeba użyć $ timeout lub użyć $ apply na końcu setTimeout.

Dlaczego wszyscy chcą używać zegarka? Możesz także użyć funkcji:

var tempArticleSearchTerm;
$scope.lookupArticle = function (val) {
    tempArticleSearchTerm = val;

    $timeout(function () {
        if (val == tempArticleSearchTerm) {
            //function you want to execute after 250ms, if the value as changed

        }
    }, 250);
}; 

Myślę, że najłatwiejszym sposobem jest wstępne załadowanie json lub załadowanie go raz, $dirtya wyszukiwanie filtru zajmie się resztą. Pozwoli to zaoszczędzić dodatkowe wywołania http i jest znacznie szybsze dzięki wstępnie załadowanym danym. Pamięć będzie bolała, ale warto.