Implementierungsprinzipien der Debounce-Funktion und der Throttle-Funktion

Dieser Artikel stellt hauptsächlich die Implementierungsprinzipien der Debounce- und Throttle-Funktion vor. Er hat einen gewissen Referenzwert. Jetzt kann ich ihn mit allen teilen.

Die Prinzipien und die Implementierung von Debounce und Throttle .

• Drosselung und Entprellung sind beides Methoden zur Verbesserung der Ausführungsleistung von Ereignisverarbeitungsfunktionen durch Reduzierung der Ausführung der tatsächlichen Logikverarbeitung . Die beiden sind im Hinblick auf das konzeptionelle Verständnis tatsächlich verwirrend.

• Debounce erzwingt, dass die Funktion nur einmal innerhalb eines bestimmten Zeitraums ausgeführt wird, während Throttle die Funktion erzwingt mit einer festen Rate auszuführen. Sie können die Benutzererfahrung beim Umgang mit einigen häufig ausgelösten DOM-Ereignissen erheblich verbessern.

Beim Umgang mit Ereignissen wie Größenänderung, Scrollen, Mausbewegung und Tasten-/Tasten-/Tastendruck möchten wir normalerweise nicht, dass diese Ereignisse zu häufig ausgelöst werden, insbesondere das Listener-Programm Es erfordert viele Berechnungen oder sehr ressourcenintensive Vorgänge.

Wie oft? Nehmen Sie als Beispiel die Mausbewegung: „Wenn sich die Maus kontinuierlich bewegt, sollte der Browser mehrere aufeinanderfolgende Mausbewegungsereignisse auslösen, basierend auf dem Verhalten des Benutzers, wenn sein interner Timer vorhanden ist.“ ermöglicht die Geschwindigkeit, mit der die Maus bewegt wird, um das Mousemove-Ereignis auszulösen. (Wenn Sie die Maus schnell genug bewegen, z. B. „wischen“, löst der Browser dieses Ereignis natürlich nicht aus.) Ereignisse wie Größenänderung, Bildlauf und Taste* sind ähnlich.

1. Die Entprellfunktion erzwingt, dass eine Funktion nur einmal innerhalb eines bestimmten kontinuierlichen Zeitraums ausgeführt wird, auch wenn sie mehrmals aufgerufen worden wäre. Wir hoffen, dass die entsprechende Überwachungsfunktion ausgeführt wird, nachdem der Benutzer eine Operation für einen bestimmten Zeitraum gestoppt hat, anstatt die Überwachungsfunktion so oft auszuführen, wie der Browser das Ereignis während der Operation des Benutzers auslöst.

function debounce(fn, delay) {

  // 定时器，用来 setTimeout
  var timer

  // 返回一个函数，这个函数会在一个时间区间结束后的 delay 毫秒时执行 fn 函数
  return function () {

    // 保存函数调用时的上下文和参数，传递给 fn
    var context = this
    var args = arguments

    // 每次这个返回的函数被调用，就清除定时器，以保证不执行 fn
    clearTimeout(timer)

    // 当返回的函数被最后一次调用后（也就是用户停止了某个连续的操作），
    // 再过 delay 毫秒就执行 fn
    timer = setTimeout(function () {
      fn.apply(context, args)
    }, delay)
  }
}

debounce gibt einen Abschluss zurück. Dieser Abschluss wird weiterhin kontinuierlich und häufig aufgerufen, aber innerhalb des Abschlusses wird die Ausführung der ursprünglichen Funktion fn eingeschränkt, sodass fn nur bei kontinuierlichen Vorgängen angehalten wird einmal ausgeführt.

Drossel

Das Konzept der Drossel ist leichter zu verstehen, nämlich die Festlegung der Geschwindigkeit, mit der eine Funktion ausgeführt wird, was die sogenannte „Drossel“ ist. . Normal

/**
*
* @param fn {Function}   实际要执行的函数
* @param delay {Number}  执行间隔，单位是毫秒（ms）
*
* @return {Function}     返回一个“节流”函数
*/

function throttle(fn, threshhold) {

  // 记录上次执行的时间
  var last

  // 定时器
  var timer

  // 默认间隔为 250ms
  threshhold || (threshhold = 250)

  // 返回的函数，每过 threshhold 毫秒就执行一次 fn 函数
  return function () {

    // 保存函数调用时的上下文和参数，传递给 fn
    var context = this
    var args = arguments

    var now = +new Date()

    // 如果距离上次执行 fn 函数的时间小于 threshhold，那么就放弃
    // 执行 fn，并重新计时
    if (last && now <p>Nach der Anwendung der beiden wird es direkt Effizienz bringen. Wenn Sie den Unterschied zwischen Debounce und Throttle immer noch nicht vollständig verstehen, können Sie auf dieser Seite einen visuellen Vergleich der beiden sehen. <br><img src="/static/imghw/default1.png" data-src="https://img.php.cn//upload/image/571/717/740/1531471276493544.png" class="lazy" title="1531471276493544.png" alt="Implementierungsprinzipien der Debounce-Funktion und der Throttle-Funktion"></p><p>Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website. </p><p>Verwandte Empfehlungen: </p><p class="comments-box-content"></p><p class="mt20 ad-detail-mm hidden-xs"><a title="对于JavaScript中的函数重载的说明" href="http://www.php.cn/js-tutorial-406490.html" target="_blank">Anleitung zur Funktionsüberladung in JavaScript</a><br></p><p class="mt20 ad-detail-mm hidden-xs"><a title="利用JavaScript中发出HTTP请求的方法" href="http://www.php.cn/js-tutorial-406487.html" target="_blank">Verwendung von JavaScript-Methoden zur Erstellung HTTP-Anfragen in </a><br></p>

Das obige ist der detaillierte Inhalt vonImplementierungsprinzipien der Debounce-Funktion und der Throttle-Funktion. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!