Verwendet den benutzerdefinierten Suchfilter
HtML
%Vor% Ich verwende ngModelChange() event auf Suchfeld
Die Liste this.tyreAndRimList der Werte für die Spalten, die in einer Variablen column erwähnt wird.
Problem
Der Filter funktioniert gut! Aber das Hauptproblem ist, dass die Filterleistung sehr schlecht ist, während die Anzahl der Datensätze sehr groß ist (mehr als 100 Zeilen pro Spalte)
Wenn
Der Filter funktioniert gut, wenn ein einzelnes Zeichen eingegeben wird (wie a ). Aber als ich den Charakter fortwährend eintippte, hängt der Browser. Der Grund dafür ist, dass der Filter jede Eingabe auf der Filterbox ausgelöst hat (weil ich ngModelChange()// onchange() event verwende)
Was ich will
Ich möchte die Filterung beenden, wenn der Benutzer fortlaufend auf das Suchfeld tippt. Sobald der Benutzer die Eingabe beendet hat, muss ich nur noch filtern.
Was ich gemacht habe
Ich habe versucht, dies zu handhaben, indem ich setTimeout() verwende. Aber warten Sie den Filteranruf nur für eine Sekunde. Es funktioniert, wenn der Benutzer nur 2 oder 3 Zeichen kontinuierlich eingegeben hat. Wenn der Benutzer jedoch mehr als 7 oder 8 oder mehr Zeichen eingibt, bleibt der Browser hängen. wegen der vielen Filter Callbacks werden zur gleichen Zeit verarbeitet.
Frage
Wie kann die Filterung gestoppt werden, während der Benutzer kontinuierlich Werte eingibt und die Filterung startet, sobald der Benutzer die Eingabe beendet hat?
Ich arbeite in eckigen 2 und Typoskript. Aber diese Frage bezieht sich nicht nur auf angularjs oder angular oder JavaScript oder typescript , weil ich eine Idee und keine Lösung möchte. Also werde ich alle diese Tags für diese Frage hinzufügen. Entferne es nicht. Danke
Entprellen Sie die Funktion. Sehen Sie, wie der Unterstrich es hier macht: Funktion Entprellen mit Underscore.js .
Sie würden dann eine entprellte Version Ihrer Funktion wie folgt erzeugen:
%Vor%Es wird nur aufgerufen, nachdem der Benutzer für mindestens eine Sekunde die Eingabe beendet hat.
Es ist nicht möglich, die Methode Array.filter zu unterbrechen. Basierend auf dem, was Sie brauchen, können Sie so umgehen:
Erläuterung
Haben Sie eine Variable, die das timerId enthält, das von der Funktion setTimeout zurückgegeben wird. Jedes Mal, wenn das Modell geändert wird, wird die Funktion handleChange aufgerufen (in diesem Beispiel). Die Funktion prüft, ob die Variable, die timerId enthält, gesetzt ist und timerId enthält. Wenn die Variable timerId enthält, wird die Funktion clearTimeout aufgerufen, um das vorherige Zeitlimit zu löschen, nachdem handleChange ein neues Zeitlimit erstellt hat und weist der Variablen das timerId (zurückgegeben von der Funktion setTimeout ) zu.
setTimeout
clearTimeout
Ohne Unterstreichung und ohne Timeout (die übrigens den gesamten Angular-Lebenszyklus auslöst), können Sie ein Observable mit der asynchronen Pipe und einer Debounce verwenden.
In Ihrer globalen Suchfunktion:
%Vor%In deiner Liste (das muss irgendwo sein)
%Vor% Ich vervollständige es mit Subject bis debounceTime .
Wenn ich jetzt den Wert in this.gloablFilterValue object ändere, benutze change event. Es wartet nur auf das Ende der Veranstaltung.
Tags und Links javascript arrays angular typescript