Detaillierte Einführung in die Entprellung und Drosselung in JavaScript (Codebeispiel)

Der Inhalt dieses Artikels ist eine detaillierte Einführung (Codebeispiel) zum Entprellen und Drosseln in JavaScript. Ich hoffe, dass er für Sie hilfreich ist.

Ob es sich um ein Interview oder eine Diskussion über die Browseroptimierung handelt, die Themen Entprellen und Drosseln werden eine Rolle spielen.
Im Allgemeinen sind diese beiden Möglichkeiten, die Häufigkeit der Ereignisauslösung zu begrenzen. Der Unterschied besteht darin, dass die Drosselung das Zeitintervall angibt, in dem Ereignisse ausgelöst werden; die Entprellung gibt die Zeitintervalle an, in denen Ereignisse nicht ausgelöst werden. Den Ergebnissen nach zu urteilen verringert die Drosselung die Empfindlichkeit der Zeitverarbeitung; während die Entprellung zuerst die auslösenden Ereignisse speichert und sie dann zusammen sendet, nachdem das angegebene Ereignisintervall überschritten wurde.
Immer schwindelerregender, gehen Sie direkt zum Code:
HTML

<input type="text" oninput="fatch()">

Es gibt ein Eingabe-Tag, nach dem Benutzer suchen können, und es gibt eine Verarbeitungsfunktion, die dies tut Wird durch das Eingabeereignis ausgelöst, fordert dieser Catch zugehörige Wörter aus dem Hintergrund basierend auf dem Wert der Eingabe an.
Mit der obigen Codeidee gibt es kein Problem, aber wenn es keine Triggereinschränkungen gibt, wird möglicherweise eine große Anzahl von HTTP-Anfragen generiert, und viele dieser Anfragen sind möglicherweise nicht von großer Bedeutung, sodass unten Platz für unsere Optimierung bleibt Ich werde zwei Ideen verwenden: Drosselung und Entprellung, um dieses Problem zu lösen. (Im Allgemeinen wird für Eingabesituationen Entprellen verwendet; dies dient nur der Vereinfachung der Code-Erklärung)

Drosselung

function jieliu (func, time){//func 执行函数， time 时间间隔
  let lastRun = null
  
  return function(){
    const now = new Date()
    if(now - lastRun > time){
      func(...arguments)
      lastRun = now
    }
  }
}


const listener = jieliu(function(value){//监听函数，指定间隔时间
  console.log(value)
}, 1000)

const input = document.querySelector("input")
//调用方法
input.addEventListener("input", function(event){
     listener(event.target.value)
})

Das Obige ist eine relativ einfache Drosselungsimplementierung und die grundlegende Verwendung der Aufrufmethode um den lastRun jeder Ausführung zu speichern. Die Anforderung, die Häufigkeit der Anfragen zu begrenzen, wird grundsätzlich umgesetzt, die Auslösung der letzten Anfrage wird jedoch ignoriert.
Die Verbesserungen sind wie folgt:

function jieliu (func, time){// 触发时间间隔>time 发送请求
  let lastRun = null
  let timeout = undefined
  return function(){
    const self = this; 
    const now = new Date()
    if(now - lastRun > time){
      if(timeout){
        clearTimeout(timeout)
        timeout = undefined
      }
      func.apply(self, arguments)
      lastRun = now
    }
    else{
      if(!timeout){
        timeout = setTimeout(func.apply(self, arguments), time)
      }
    }
  }
}

Timeout hinzufügen, um festzustellen, ob es sich um die letzte Anfrage handelt.

Debounce

function qudou(func, time){
  let timeout = undefined
  
  return function(){
    const argu = arguments
    const self = this

    if(timeout){
      clearTimeout(timeout)
      timeout = undefined
    }else{
        timeout = setTimeout(func.apply(this, arguments), time)
    }
  }
}

Das Obige ist eine einfache Implementierung von Debounce. Ebenso kann das letzte Ereignis die Verarbeitungsfunktion nicht auslösen.

Die Verbesserungen sind wie folgt:

function qudou(func, time){//判断连续time时间内不触发，发送func请求
  let timeout = undefined;
  let lastRun = null
  return function(){
    const self = this
    const now = new Date()
    if(now - lastRun > time){
      func.apply(self, arguments)
    }
    else {
      if(!timeout){
        timeout = setTimeout(func.apply(self, arguments), time)
      }
      else {
        clearTimeout(timeout)
        timeout = undefined
      }
    }
    lastRun = new Date()
  }
}

Zusammenfassung

Schreiben Sie den gesamten Artikel auf, indem Sie „jetzt“ vergleichen. und „lastRun“-Zeitunterschied, wodurch die Anzahl der Aufrufe der Verarbeitungsfunktion verringert wird. Settimeout wird weiterhin verwendet, um den Aufrufzeitpunkt der Verarbeitungsfunktion zu verzögern, und fasst dann die Ergebnisse mehrerer Trigger zusammen und ruft die Verarbeitungsfunktion zusammen auf.

Das obige ist der detaillierte Inhalt vonDetaillierte Einführung in die Entprellung und Drosselung in JavaScript (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!