JS einfache Implementierung von Anti-Shake – Entprellen und Drosseln – Drosseln

1. Was ist Anti-Shake und Throttling?

Ps: Im Suchfeld ruft der Benutzer beispielsweise bei der Eingabe die Suche auf. Wenn der Benutzer jedes Mal eingibt: Wie viele Serverressourcen werden verbraucht, selbst wenn Ihre Serverressourcen sehr leistungsfähig sind? change

1. Anti-Shake – Entprellen

Eine der Lösungen besteht darin, jedes Mal nach

zu suchen, wenn der Benutzer mit der Eingabe aufhört und die Verzögerung 500ms überschreitet. String

• Prinzip: Mehrere Funktionsaufrufe zu einem zusammenfassen und nach Ablauf einer bestimmten Zeit nur einmal aufgerufen werden.

• Code-Implementierung:

function debounce(fn, delay) {
  // 维护一个 timer，用来记录当前执行函数状态
  let timer = null;

  return function() {
    // 通过 ‘this’ 和 ‘arguments’ 获取函数的作用域和变量
    let context = this;
    let args = arguments;
    // 清理掉正在执行的函数，并重新执行
    clearTimeout(timer);
    timer = setTimeout(function() {
      fn.apply(context, args);
    }, delay);
  }
}
let flag = 0; // 记录当前函数调用次数
// 当用户滚动时被调用的函数
function foo() {
  flag++;
  console.log('Number of calls: %d', flag);
}

// 在 debounce 中包装我们的函数，过 2 秒触发一次
document.body.addEventListener('scroll', debounce(foo, 2000));

1. Nachdem die Funktion gekapselt ist, geben Sie die interne Funktion zurück debounce

2. Jedes Mal, wenn das Ereignis ausgelöst wird, wird das aktuelle

   gelöscht und das Timeout zurückgesetzt und aufgerufen. Dies führt dazu, dass jedes Hochfrequenzereignis den vorherigen Timeout-Aufruf abbricht, wodurch der Ereignishandler nicht ausgelöst wird. timer

3. Erst wenn das Hochfrequenzereignis stoppt, wird der durch das ausgelöste Timeout-Aufruf ausgelöst letztes Ereignis kann

   delay

nach

Zeit 2 ausführen. Gas - Gas geben

Eine andere Lösung, die lockerer ist als

Anti-Shake Zu diesem Zeitpunkt möchten wir nicht, dass der Benutzer blind eingibt, sondern geben dem Benutzer einige Suchaufforderungen. Daher beschränken wir die Abfrage zu diesem Zeitpunkt jedes Mal auf . Dies ist eine Drosselung. 500msString

Prinzip: Unabhängig davon, wie häufig das Ereignis ausgelöst wird, stellt die Drosselungsfunktion sicher, dass die eigentliche Ereignisverarbeitungsfunktion innerhalb der angegebenen Zeit einmal ausgeführt wird.
Es gibt zwei Code-Implementierungen, eine ist Zeitstempel und die andere ist Timer
• 1) Zeitstempel-Implementierung:

  
  

  function throttle(func, delay){
    let prev = Date.now();
    return function(){
      const context = this;
      const args    = arguments;
      const now     = Date.now();
      if(now - prev >= delay){
        func.apply(context, args);
        prev = Date.now();
      }
    }
  }

Wenn ein Hoch -Frequenzereignis ausgelöst wird, sollte es sofort zum ersten Mal ausgeführt werden (wenn das Intervall zwischen der Ereignisbindungsfunktion und dem tatsächlichen auslösenden Ereignis größer als

ist), dann wird es unabhängig von der Häufigkeit, mit der das Ereignis ausgelöst wird, ausgeführt alle ausgeführt werden

Wird nur einmal pro Sekunde ausgeführt. Nachdem das letzte Ereignis ausgelöst wurde, wird das Ereignis nicht mehr ausgeführt. delaydelay2) Timer-Implementierung:

Wenn das Ereignis erneut ausgelöst wird, wird es erst dann ausgeführt, wenn der Timer vorhanden ist 🎜> Sekunden später führt der Prozessor die Ausführungsfunktion aus und löscht den Timer, sodass der nächste Timer eingestellt werden kann.

fucntion throttle(func, delay){
  let timer = null;

  return funtion(){
    let context = this;
    let args    = arguments;
    if(!timer){
      timer = setTimeout(function(){
        func.apply(context, args);
        timer = null;
      }, delay);
    }
  }
}

Wenn das Ereignis zum ersten Mal ausgelöst wird, wird die Funktion definitiv nicht sofort ausgeführt, sondern nach delay Sekunden. Nach

werden Ereignisse kontinuierlich ausgelöst und alle

Sekunden ausgeführt. delayNachdem der letzte Stopp ausgelöst wurde, kann die Funktion aufgrund der
Verzögerung des Timers einmal ausgeführt werden. delay
3) Kombinierte Verwendung von Zeitstempeln und Timern zur sofortigen Ausführung, wenn ein Ereignis ausgelöst wird. Die Drosselungsfunktion delay

function throttle(func, delay){
  let timer = null;
  let startTime = Date.now();

  return function(){
    let curTime = Date.now();
    let remaining = delay - (curTime - startTime);
    const context = this;
    const args = arguments;

    clearTimeout(timer);
    if(remaining <= 0){
      func.apply(context,args);
      startTime = Date.now();
    }else{
      timer = setTimeout(func, remaining);
    }
  }
}

muss jedes

Mal ausgeführt werden , sodass die Startzeit, die aktuelle Zeit und

innerhalb der Drosselungsfunktion zur Berechnung von

verwendet werden. Wenn delay bedeutet, dass es Zeit ist, die Funktion auszuführen, setzen Sie sie auf delayNach einiger Zeit erneut auslösen. Wenn während des remaining-Zeitraums ein anderes Ereignis auftritt, wird der aktuelle Timer natürlich abgebrochen und ein remaining <= 0 wird neu berechnet, um den aktuellen Status zu ermitteln. remainingremainingVerwandte Artikel: remaining

Detaillierte Erläuterung der Drosselung und Anti-Shake-Entprellung der Javascript-Funktion

Detaillierte Erläuterung der Drosselung und des Anti-Shake der Javascript-Funktion

Das obige ist der detaillierte Inhalt vonJS einfache Implementierung von Anti-Shake – Entprellen und Drosseln – Drosseln. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!