Ausführliche Erläuterung der Beispiele für JS-Funktionsdrosselung und Anti-Shake

Dieser Artikel stellt hauptsächlich die Funktionsdrosselung und die Anti-Shake-Funktion vor, um ähnliche Anforderungen zu erfüllen. Ich hoffe, dass er allen helfen kann.

Bei der Front-End-Entwicklung lösen einige Benutzerverhalten häufig die Ausführung von Ereignissen aus, und leistungsintensive Verarbeitungsvorgänge wie DOM-Vorgänge und das Laden von Ressourcen können zum Einfrieren der Benutzeroberfläche oder sogar zum Absturz des Browsers führen. Funktionsdrosselung (Throttle) und Funktionsentprellung (Debounce) wurden ins Leben gerufen, um ähnliche Anforderungen zu lösen.

Funktionsdrosselung (Throttle)

Funktionsdrosselung besteht darin, eine Funktion so zu planen, dass sie nur dann ausgeführt wird, wenn sie größer oder gleich dem Ausführungszyklus ist, und Aufrufe innerhalb des Zyklus werden nicht ausgeführt. Es ist, als würde ein Wassertropfen fallen, nachdem er ein bestimmtes Gewicht erreicht hat.

Szenario:

• Fenstergröße ändern

• Scrollen

• Verrückte Kaufklicks (Mousedown)

Erfolg:

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

document.getElementById('throttle').onclick = throttle(function(){console.log('click')},2000);

Unterstreichungsimplementierung:

_.throttle = function(func, wait, options) {
  var context, args, result;
  var timeout = null;
  var previous = 0;
  if (!options) options = {};
  var later = function() {
    previous = options.leading === false ? 0 : _.now();
    timeout = null;
    result = func.apply(context, args);
    if (!timeout) context = args = null;
  };
  return function() {
    var now = _.now();
    if (!previous && options.leading === false) previous = now;
    //计算剩余时间
    var remaining = wait - (now - previous);
    context = this;
    args = arguments;
    //剩余时间小于等于0或者剩余时间大于等待时间(本地时间变动出现)
    if (remaining <= 0 || remaining > wait) {
      if (timeout) {
        clearTimeout(timeout);
        timeout = null;
      }
      previous = now;
      result = func.apply(context, args);
      if (!timeout) context = args = null;
    } else if (!timeout && options.trailing !== false) {
      timeout = setTimeout(later, remaining);
    }
    return result;
  };
};

Funktionsentprellung (Entprellung)

Funktionsentprellung ist, wenn die Funktion häufig ausgelöst werden muss, nur genügend Leerlaufzeit hat und nur einmal ausgeführt wird. Es scheint, als würde der Busfahrer darauf warten, dass alle einsteigen, bevor er den Bus verlässt.

Szenario:

• Echtzeitsuche (Tastenbetätigung)

• Drag and Drop (Mausbewegung)

Implementierung:

function debounce(method, delay){
  var timer = null;
  return function(){
    var context = this,args = arguments;
    clearTimeout(timer);
    timer = setTimeout(function(){
      method.apply(context, args);
    },delay);
  }
}

document.getElementById('debounce').onclick = debounce(function(){console.log('click')},2000);

Unterstrich-Implementierung:

_.debounce = function(func, wait, immediate) {
  var timeout, args, context, timestamp, result;
  var later = function() {
    var last = _.now() - timestamp;
    if (last < wait && last >= 0) {
      timeout = setTimeout(later, wait - last);
    } else {
      timeout = null;
      if (!immediate) {
        result = func.apply(context, args);
        if (!timeout) context = args = null;
      }
    }
  };
  return function() {
    context = this;
    args = arguments;
    timestamp = _.now();
    var callNow = immediate && !timeout;
    if (!timeout) timeout = setTimeout(later, wait);
    if (callNow) {
      result = func.apply(context, args);
      context = args = null;
    }
    return result;
  };
};

Funktionsdrosselung (Throttle) und Function Debounce (Debounce) sind beide Methoden zur Verbesserung der Leistung durch Verzögerung logischer Operationen und gängige und wichtige Lösungen bei der Front-End-Optimierung. Sie können den Unterschied zwischen den beiden anhand von Konzepten und praktischen Anwendungen verstehen und bei Bedarf die geeignete Methode auswählen.

Verwandte Empfehlungen:

Detaillierte Erläuterung der Drosselung und Anti-Shaking von Javascript-Funktionen

Detaillierte Analyse der Entprellung und Drosselung von JS-Funktionen Stream_Grundkenntnisse

Die Bedeutung von Funktionsdrosselung und Anti-Shake

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung der Beispiele für JS-Funktionsdrosselung und Anti-Shake. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!