Erfahren Sie mehr über die Drosselung von JavaScript-Funktionen und die Wissenspunkte zum Entprellen von Funktionen

In diesem Artikel werden Wissenspunkte im Zusammenhang mit der Drosselung und Entprellung von JavaScript-Funktionen geteilt. Freunde in Not können es lernen und sich darauf beziehen.

Konzept

Throttle (Drossel) verhindert, dass eine Funktion zu häufig ausgeführt wird, und reduziert Aufrufe, die zu schnell ausgeführt werden Throttle

Debounce Debounce dient dazu, fortlaufende Funktionsaufrufe für einen bestimmten Zeitraum nur einmal auszuführen

Anwendungsszenarien drosseln

• DOM-Element-Drag-Funktionsimplementierung (Mousemove)

• Mousedown/Keydown-Ereignis des Schießspiels (pro Zeiteinheit kann nur eine Kugel abgefeuert werden)

• Berechnen Sie die Distanz der Mausbewegung (mousemove)

• Canvas simuliert die Zeichenflächenfunktion (mousemove

• Suche Lenovo (keyup

• Abhören von Scrollereignissen, um zu bestimmen, ob automatisch mehr geladen werden soll, wenn das Ende der Seite erreicht wird: Nach dem Hinzufügen von Debounce zum Scrollen wird erst dann festgestellt, ob der Benutzer mit dem Scrollen aufhört, ob er das Ende erreicht hat der Seite; Wenn es sich um eine Drosselung handelt, wird es jedes Mal einmal beurteilt, solange die Seite scrollt
  

Entprellungsanwendungsszenario

Jedes Mal, wenn Größenänderung/Scrollen statistische Ereignisse auslöst

Überprüfung der Texteingabe (AJAX-Anfragen zur Überprüfung nach kontinuierlicher Texteingabe senden, nur einmal überprüfen)

Implementierung der Funktion Debounce

Nehmen wir das Scroll-Ereignis als Beispiel, um zu untersuchen, wie eine Hallo-Welt-Zeichenfolge gedruckt wird, sobald das Fenster gescrollt oder entprellt wird:

window.onscroll = function () {
 console.log('hello world');
}

Auf diese Weise werden bei jedem Scrollen des Fensters tatsächlich mehrere Hallo-Welten gedruckt. Die Idee hinter der Funktionsentprellung besteht darin, dass einige Codes nicht kontinuierlich und ohne Unterbrechung ausgeführt werden können Wenn diese Funktion aufgerufen wird, löscht sie den vorherigen Timer und setzt einen anderen. Wenn der vorherige Timer bereits ausgeführt wurde, hat dieser Vorgang keine Bedeutung ein neuer Timer. Der Zweck besteht darin, die Funktion erst auszuführen, nachdem die Ausführungsanforderung für einen bestimmten Zeitraum angehalten wurde. „Height Three“ liefert den prägnantesten und klassischsten Entprellcode wie folgt:

function debounce(method, context) {
 clearTimeout(method.tId);
 method.tId = setTimeout(function() {
 method.call(context);
 }, 1000);
}

function print() {
 console.log('hello world');
}

window.onscroll = function() {
 debounce(print);
};

Machen Sie etwas weitere Änderungen

function debounce(delay, action) {
 var tId;
 return function () {
  var context = this;
  var arg = arguments;
  if (tId) clearTimeout(tId);
  tId = setTimeout(function () {
   action.apply(context, arg);
  }, delay);
 }
}

window.onscroll = debounce(1000, print);

Implementierung der Funktionsdrosselung

Funktionsdrosselung besteht darin, kontinuierlich ausgeführte Funktionen intermittierend in einem festen Zeitraum auszuführen

Eine davon ist die Verwendung von Zeitstempel, um festzustellen, ob die Rückrufausführungszeit erreicht wurde, den Zeitstempel der letzten Ausführung aufzuzeichnen, den Rückruf dann jedes Mal auszuführen, wenn das Ereignis ausgelöst wird, und den Abstand zwischen dem aktuellen Zeitstempel im Rückruf zu bestimmen Der Ausführungszeitstempel hat *s. Wenn ja, führen Sie den Zeitstempel der letzten Ausführung aus und aktualisieren Sie ihn usw.

var throttle = function(delay, action) {
 var last = 0;
 return function() {
  var curr = new Date();
  if (curr - last > delay) {
   action.apply(this, arguments);
   last = curr;
  }
 }
}

Die zweite Methode besteht darin, einen Timer zu verwenden. Wenn das Scroll-Ereignis beispielsweise zum ersten Mal ausgelöst wird, drucken Sie ein „Hallo Welt“ und stellen Sie dann einen 1000-ms-Timer ein. Wenn bereits ein Timer vorhanden ist, führt der Callback die Methode erst aus, wenn der Timer startet, der Handler gelöscht und der Timer zurückgesetzt wird.

var throttle = function(delay, action) {
 var timeout;
 var later = function () {
  timeout = setTimeout(function(){
   clearTimeout(timeout);
   // 解除引用
   timeout = null;
  }, delay);
 };
 later();
 if (!timeout) {
  action.apply(this, arguments);
  later();
 }
}

Update-Methode:

function throttlePro(delay, action) {
 var tId;
 return function () {
  var context = this;
  var arg = arguments;
  if (tId) return;
  tId = setTimeout(function () {
   action.apply(context, arg);
   clearTimeout(tId);
   // setTimeout 返回一个整数，clearTimeout 之后，tId还是那个整数,setInterval同样如此
   tId = null;
  }, delay);
 }
}

Das Obige ist der gesamte Inhalt dieses Kapitels. Weitere verwandte Tutorials finden Sie unter

JavaScript-Video-Tutorial

!

Das obige ist der detaillierte Inhalt vonErfahren Sie mehr über die Drosselung von JavaScript-Funktionen und die Wissenspunkte zum Entprellen von Funktionen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!