Eine kurze Analyse von Drosselung und Entprellung in Javascript_Grundkenntnisse

Gashebel

Die Drosselung, von der wir hier sprechen, bedeutet Funktionsdrosselung. Einfacher ausgedrückt ist der Frequenzregler von Funktionsaufrufen die kontinuierliche Steuerung des Ausführungszeitintervalls. Zu den Hauptanwendungsszenarien gehören:

1. Mausbewegung, Mousemove-Ereignis
2. Dynamische Positionierung von DOM-Elementen, Größenänderungs- und Scroll-Ereignisse des Fensterobjekts

Jemand hat den obigen Vorfall anschaulich mit dem Abfeuern eines Maschinengewehrs verglichen. Der Gashebel ist der Abzug des Maschinengewehrs. Wenn Sie den Abzug nicht loslassen, feuert es weiter. Das Gleiche gilt für die oben genannten Ereignisse, die wir während der Entwicklung verwenden. Wenn Sie die Maus nicht loslassen, werden die Ereignisse weiterhin ausgelöst. Zum Beispiel:

Code kopieren Der Code lautet wie folgt:

var resizeTimer=null;
$( window).on('resize',function(){
if(resizeTimer){
clearTimeout(resizeTimer)
}
resizeTimer=setTimeout(function(){
console.log( "Fenstergröße ändern");
},400);

Entprellen

Debounce ist dem Throttle sehr ähnlich, was bedeutet, dass die aufrufende Methode nur ausgeführt wird, wenn die Leerlaufzeit größer oder gleich einem bestimmten Wert sein muss. Entprellen ist die Intervallsteuerung der Leerlaufzeit. Wenn wir beispielsweise die automatische Vervollständigung durchführen, müssen wir bei der Texteingabe eine gute Kontrolle über das Zeitintervall zwischen den Aufrufmethoden haben. Im Allgemeinen wird das erste Eingabezeichen sofort aufgerufen und die Ausführungsmethode wird in einem bestimmten Zeitintervall wiederholt aufgerufen. Dies ist besonders nützlich bei anormalen Eingaben, wie z. B. dem Drücken und Halten eines bestimmten Gebäudes.

Die Hauptanwendungsszenarien der Entprellung sind:
Keydown-Ereignis bei der Texteingabe, Keyup-Ereignis, z. B. automatische Vervollständigung

Es gibt viele Online-Methoden dieser Art. Beispielsweise kapselt Underscore.js Throttle und Debounce. jQuery verfügt auch über ein Throttle- und Debounce-Plugin: jQuery Throttle/Debounce. Alle Prinzipien sind gleich und die gleichen Funktionen sind implementiert. Hier ist eine weitere Drosselungs- und Entprellungssteuerungsfunktion, die ich verwendet habe:

Kopieren Sie den Code Der Code lautet wie folgt:

/*
* Wenn die Funktion zur Rückgabe der Frequenzsteuerung kontinuierlich aufgerufen wird, ist die Ausführungshäufigkeit von fn auf die Ausführung jedes Mal beschränkt.
* @param fn {function} Die Funktion, die aufgerufen werden muss
* @paramverzögerung {Zahl} Verzögerungszeit, Einheit Millisekunde
* @param immediate {bool} Übergeben Sie false an den unmittelbaren Parameter. Die gebundene Funktion wird zuerst ausgeführt, nicht nach der Verzögerung.
* @return {function}ruft die Funktion tatsächlich auf
*/
vardrossel = Funktion (fn, Verzögerung, sofort, Entprellung) {
var curr = neues Datum(),//aktuelles Ereignis
last_call = 0,
last_exec = 0,
timer = null,
diff, //Zeitunterschied
context,//context
args,
exec = function ( ) {
last_exec = curr;
fn.apply(context, args);
};
return function () {
curr= new Date();
context = this ,
args = arguments,
diff = curr - (debounce ? last_call : last_exec) - delay;
clearTimeout(timer);
if (debounce) {
if (immediate) {
timer = setTimeout(exec, delay);
                                                                                                                        >= 0 ) {
                                                     exec();                                                                           🎜> last_call = curr;
}
};

/*
* Wenn die Leerlaufsteuerungsrückgabefunktion kontinuierlich aufgerufen wird, muss die Leerlaufzeit größer oder gleich der Verzögerung sein, und fn wird ausgeführt
* @param fn {Funktion} Zu nennende Funktion
* @ paramverzögerung {Zahl} Leerlaufzeit
* @param immediate {bool} Übergeben Sie false an den Immediate-Parameter. Die gebundene Funktion wird zuerst ausgeführt, nicht nach der Verzögerung.
* @return {function}Die eigentliche Funktion, die aufgerufen wird
*/

var debounce = function (fn, Delay, Immediate) {
Return Throttle(fn, Delay, Immediate, True) ;