Ich habe ein Leistungsproblem, das ich anscheinend nicht ansprechen kann. Ich habe eine sofortige Suche, aber sie ist etwas verzögert, da sie bei jeder Suche beginnt 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>
Die JSON-Daten sind nicht einmal so groß, nur 300 KB. Ich denke, ich muss eine Verzögerung von ~ 1 Sekunde für die Suche festlegen, um zu warten, bis der Benutzer die Eingabe beendet hat, anstatt die Aktion bei jedem Tastendruck auszuführen. AngularJS macht das intern und nachdem ich hier Dokumente und andere Themen gelesen hatte, konnte ich keine spezifische Antwort finden.
Ich würde mich über Hinweise freuen, wie ich die sofortige Suche verzögern kann.
Antworten:
(Eine Angular 1.3-Lösung finden Sie in der Antwort unten.)
Das Problem hierbei ist, dass die Suche jedes Mal ausgeführt wird, wenn sich das Modell ändert. Dies ist jede Keyup-Aktion für eine Eingabe.
Es gibt sauberere Möglichkeiten, dies zu tun, aber wahrscheinlich ist es am einfachsten, die Bindung so zu ändern, dass in Ihrem Controller eine $ scope-Eigenschaft definiert ist, mit der Ihr Filter arbeitet. Auf diese Weise können Sie steuern, wie oft diese $ scope-Variable aktualisiert wird. Etwas wie das:
JS:
HTML:
quelle
ng-model
nicht im modalen Winkel-UI-BootstrapAKTUALISIEREN
Jetzt ist es einfacher als je zuvor (Angular 1.3). Fügen Sie dem Modell einfach eine Entprellungsoption hinzu.
<input type="text" ng-model="searchStr" ng-model-options="{debounce: 1000}">
Aktualisierter Plunker:
http://plnkr.co/edit/4V13gK
Dokumentation zu ngModelOptions:
https://docs.angularjs.org/api/ng/directive/ngModelOptions
Alte Methode:
Hier ist eine andere Methode ohne Abhängigkeiten, die über den Winkel hinausgehen.
Sie müssen ein Zeitlimit festlegen und Ihre aktuelle Zeichenfolge mit der vorherigen Version vergleichen. Wenn beide identisch sind, wird die Suche ausgeführt.
und das geht in deine Sicht:
Der obligatorische Plunker: http://plnkr.co/dAPmwf
quelle
In Angular 1.3 würde ich Folgendes tun:
HTML:
Regler:
Grundsätzlich weisen Sie Angular an, ausgeführt zu werden
myDebouncedFunction()
, wenn sich diemsg
Bereichsvariable ändert. Das Attributng-model-options="{debounce: 1000}"
stellt sicher, dassmsg
nur einmal pro Sekunde aktualisiert werden kann.quelle
Jetzt können wir ng-model-options mit der Zeit entprellen lassen und wenn Unschärfe, muss das Modell sofort geändert werden, sonst hat es beim Speichern einen älteren Wert, wenn die Verzögerung nicht abgeschlossen ist.
quelle
Für diejenigen, die Keyup / Keydown im HTML-Markup verwenden. Dies verwendet keine Uhr.
JS
HTML
quelle
Entprellte / gedrosselte Modellaktualisierungen für AngularJS: http://jsfiddle.net/lgersman/vPsGb/3/
In Ihrem Fall gibt es nichts weiter zu tun, als die Direktive im jsfiddle-Code wie folgt zu verwenden:
Es ist im Grunde ein kleiner Code, der aus einer einzelnen Winkelanweisung mit dem Namen "ng-ampere-debounce" besteht, die http://benalman.com/projects/jquery-throttle-debounce-plugin/ verwendet und an jedes dom-Element angehängt werden kann. Die Direktive ordnet die angehängten Ereignishandler neu an, damit sie steuern kann, wann Ereignisse gedrosselt werden sollen.
Sie können es zum Drosseln / Entprellen verwenden * Modellwinkelaktualisierungen * Winkelereignishandler ng- [Ereignis] * jquery Ereignishandler
Schauen Sie mal rein : http://jsfiddle.net/lgersman/vPsGb/3/
Die Richtlinie wird Teil des Orangevolt Ampere-Frameworks ( https://github.com/lgersman/jquery.orangevolt-ampere ) sein.
quelle
Nur für Benutzer, die hier umgeleitet werden:
Wie in eingeführt
Angular 1.3
, können Sie das Attribut ng-model-options verwenden :quelle
Ich glaube, dass der beste Weg, um dieses Problem zu lösen, die Verwendung von Ben Almans Plugin jQuery Throttle / Debounce ist . Meiner Meinung nach besteht keine Notwendigkeit, die Ereignisse jedes einzelnen Feldes in Ihrem Formular zu verzögern.
Wickeln Sie einfach Ihre $ scope. $ Watch-Handling-Funktion in $ .debounce wie folgt ein:
quelle
Eine andere Lösung besteht darin, der Modellaktualisierung eine Verzögerungsfunktion hinzuzufügen. Die einfache Anweisung scheint einen Trick zu machen:
Verwendung:
Sie verwenden also nur
delayed-model
anstelle vonng-model
und definieren die gewünschtendata-delay
.Demo: http://plnkr.co/edit/OmB4C3jtUD2Wjq5kzTSU?p=preview
quelle
model: '=delayedModel'
es funktioniert? Oder können Sie mich auf einen Link verweisen, wo ich ihn finden kann?element.on('change')
wird nur bei Unschärfe ausgelöst. (1) Gibt es eine Problemumgehung? (2) Wie rufe ich eine Funktion des Controllers bei einer Textänderung auf?Ich habe dieses Problem mit einer Direktive gelöst, die im Grunde genommen das echte ng-Modell an ein spezielles Attribut bindet, das ich in der Direktive beobachte, und dann mithilfe eines Debounce-Dienstes mein Direktivenattribut aktualisiere, damit der Benutzer die Variable überwacht, die er bindet an das Entprellungsmodell anstelle des ng-Modells.
Verwendung:
Und in der Steuerung:
Demo in jsfiddle: http://jsfiddle.net/6K7Kd/37/
Den $ debounce-Service finden Sie hier: http://jsfiddle.net/Warspawn/6K7Kd/
Inspiriert von der finallyBind-Richtlinie http://jsfiddle.net/fctZH/12/
quelle
Angular 1.3 wird ng-model-options debounce haben, aber bis dahin müssen Sie einen Timer verwenden, wie Josue Ibarra sagte. In seinem Code startet er jedoch bei jedem Tastendruck einen Timer. Außerdem verwendet er setTimeout, wenn in Angular $ timeout oder $ apply am Ende von setTimeout verwendet werden muss.
quelle
Warum will jeder die Uhr benutzen? Sie können auch eine Funktion verwenden:
quelle
Ich denke, der einfachste Weg hier ist, den JSON vorzuladen oder einmal zu laden,
$dirty
und dann kümmert sich die Filtersuche um den Rest. Dies erspart Ihnen die zusätzlichen http-Aufrufe und ist mit vorinstallierten Daten viel schneller. Das Gedächtnis wird weh tun, aber es lohnt sich.quelle