Mam dane wejściowe, które filtrują listę powtórzeń ng po zmianie. Powtórzenie zawiera dużo danych i przefiltrowanie wszystkiego zajmuje kilka sekund. Chciałbym, aby były opóźnione o 0,5 sekundy przed rozpoczęciem procesu filtrowania. Jaki jest prawidłowy sposób w kątowym, aby utworzyć to opóźnienie?
Wejście
<input ng-model="xyz" ng-change="FilterByName()" />
Powtarzać
<div ng-repeat"foo in bar">
<p>{{foo.bar}}</p>
</div>
Funkcja filtra
$scope.FilterByName = function () {
//Filtering Stuff Here
});
Dzięki
$timeout
przez 500 ms.$scope.FilterByName = function () { $timeout(_filterByName , 500)
$timeout.cancel(timeoutpromise)
jeśli trwa jeden limit czasu, a inna zmiana zostanie wyzwolona.Odpowiedzi:
AngularJS 1.3+
Od AngularJS 1.3 możesz wykorzystać tę
debounce
właściwość,ngModelOptions
aby osiągnąć to bardzo łatwo, bez użycia$timeout
w ogóle. Oto przykład:HTML:
JS:
- LUB -
Sprawdź skrzypce
Przed AngularJS 1.3
Będziesz musiał użyć $ timeout, aby dodać opóźnienie i prawdopodobnie za pomocą $ timeout.cancel (previoustimeout) możesz anulować poprzedni limit czasu i uruchomić nowy (pomaga to zapobiec wielokrotnemu wykonywaniu filtrowania w ciągu Przedział czasowy)
Oto przykład:
źródło
ng-model-options
zostało dodane tylko w Angular v1.3 (i właściwość debounce w wersji beta.8 ). Ci, którzy nadal będą musieli korzystać ze starszej wersji Angulara, będą musieli skorzystać z innych rozwiązań, na przykład z PSL, lub z zewnętrznego modułu, takiego jak ng-debounce .Możesz użyć,
$timeout
aby dodać opóźnienie i prawdopodobnie za pomocą$timeout.cancel(previoustimeout)
ciebie możesz anulować poprzedni limit czasu i uruchomić nowy (pomaga zapobiec wielokrotnemu wykonywaniu filtrowania w odstępach czasu)Przykład:-
Plnkr
źródło
ng-change
gdy nie chcę usuwać modelu.Wiem, że to pytanie jest zbyt stare. Ale nadal chcę zapewnić jeden szybszy sposób osiągnięcia tego za pomocą odbicia .
Więc kod można zapisać jako
Odbicie przyjmie liczbę w milisekundach.
źródło
lub możesz użyć dyrektywy 'typeahead-wait-ms = "1000"' z angular -ui
źródło