Gaspedal
Das Gas, über das wir hier sprechen, bedeutet Funktionsdrosseln. Um einfach auszudrücken, besteht der Frequenzcontroller von Funktionsaufrufen darin, die Zeitintervallsteuerung kontinuierlich durchzuführen. Hauptanwendungsszenarien wie:
1. Mausbewegungsveranstaltung
2. Dynamische Positionierung von DOM -Elementen, Größe und Scrollenereignisse von Fensterobjekten
Einige Menschen vergleichen den oben genannten Vorfall lebhaft mit dem Verfolgen eines Maschinengewehrs. Der Gas ist der Auslöser des Maschinengewehrs. Wenn Sie den Auslöser nicht einsetzen, schießt er weiter. Gleiches gilt für die oben genannten Ereignisse, die wir während der Entwicklung verwendet haben. Wenn Sie die Maus nicht freigeben, werden ihre Ereignisse immer ausgelöst. Zum Beispiel:
Die Codekopie lautet wie folgt:
var resizetimer = null;
$ (Fenster) .on ('Größe', function () {
if (resizetimer) {
Clearimeout (Resizetimer)
}
resizetimer = setTimeout (function () {
console.log ("Fensterresize");
}, 400);
Entlarven
Dobounce ist dem Gas sehr ähnlich. DeBounce ist eine Methode, die ausgeführt wird, wenn die Freizeit größer oder gleich einem bestimmten Wert sein muss. Enttounce ist die Intervallkontrolle der Freizeit. Wenn wir beispielsweise automatisch machen, müssen wir das Zeitintervall des Aufrufens der Methode beim Eingeben von Text steuern. Im Allgemeinen wird das erste Eingangszeichen sofort aufgerufen, und die ausgeführte Methode wird wiederholt gemäß einem bestimmten Zeitintervall aufgerufen. Es ist besonders nützlich für abnormale Inputs, z.
Die wichtigsten Anwendungsszenarien von Dunounce sind:
TEXT -Eingangsschlüsseldownereignis, KeyUp -Ereignis, z. B. automatische Vervollständigung
Es gibt viele Methoden für diese Art von Online, wie z. B. Unscore.js, die Gas und Downounce verkörpert. JQuery hat auch ein Plug-In für Gas und Darfounce: JQuery Throttle/Dobounce. Alle Prinzipien sind gleich und die gleichen Funktionen werden implementiert. Hier ist eine weitere Gas- und Entdeckungskontrollfunktion, die ich wieder verwendet habe:
Die Codekopie lautet wie folgt:
/*
* Wenn die Frequenzsteuerungsrückgabefunktion kontinuierlich aufgerufen wird, beschränkt sich die FN -Ausführungsfrequenz darauf, wie oft sie jedes Mal ausgeführt wird
* @param fn {function} Funktionen, die aufgerufen werden müssen
* @Param Delay {Nummer} Verzögerungszeit in Millisekunden
* @param unmittelbar {bool} passieren falsch an den unmittelbaren Parameter Die gebundene Funktion wird zuerst ausgeführt und nicht verzögert und dann ausgeführt.
* @return {function} Rufen Sie tatsächlich die Funktion auf
*/
var throttle = function (fn, verzögert, sofortig, dunceunion) {
var Curr = +neues Datum (), // aktuelles Ereignis
last_call = 0,,
last_exec = 0,,
Timer = null,
Diff, // Zeitunterschied
Kontext, // Kontext
args,
exec = function () {
last_exec = Curr;
fn.Apply (Kontext, Args);
};
return function () {
Curr = +neues Datum ();
Kontext = dies,,
args = argumente,
diff = curr - (debounce? last_call: last_exec) - Verzögerung;
Clearimeout (Timer);
if (dabounce) {
if (unmittelbar) {
timer = setTimeout (exec, delay);
} else if (diff> = 0) {
exec ();
}
} anders {
if (diff> = 0) {
exec ();
} else if (unmittelbar) {
Timer = setTimeout (Exec, -diff);
}
}
last_call = Curr;
}
};
/*
* Wenn die Rückgabefunktion der Leerlaufsteuerung kontinuierlich aufgerufen wird, muss die Leerlaufzeit größer oder gleich der Verzögerung sein, bevor FN ausgeführt wird.
* @param fn {function} Die zu aufgerufene Funktion
* @param delay {number} Freizeit
* @param unmittelbar {bool} passieren falsch an den unmittelbaren Parameter Die gebundene Funktion wird zuerst ausgeführt und nicht verzögert und dann ausgeführt.
* @return {function} Rufen Sie tatsächlich die Funktion auf
*/
var debounce = function (fn, delay, unmittelbar) {
Return Throttle (Fn, Verzögerung, sofortig, wahr);