Die Verwendung der Anti-Shake- und Throttling-Funktion ist leicht verständlich

Vorwort

Funktionsstabilisierung und Drosselung, dieser Wissenspunkt wird eher in Interviews gefragt.

Anti-Shake

Die nicht-sofortige Ausführungsversion von Anti-Shake kann so verstanden werden, dass eine Funktion einmal nach n-Zeiten ausgeführt wird. Die Version von Anti-Shake mit sofortiger Ausführung besteht darin, eine Funktion sofort auszuführen.

Implementierung von Anti-Shake

/**
 * @desc 函数防抖
 * @param {Function} func 函数
 * @param {Number} wait 延迟执行毫秒数
 * @param {Boolean} immediate true 表示立即执行，false 表示非立即执行
 */
function debounce(func, wait, immediate) {
  let timeout
  return function () {
    let context = this
    let args = arguments
    if (timeout) {
      clearTimeout(timeout)
    }
    if (immediate) {
      let callNow = !timeout
      timeout = setTimeout(() => {
        timeout = null
      }, wait)
      if (callNow) {
        typeof func === 'function' && func.apply(context, args)
      }
    } else {
      timeout = setTimeout(() => {
        typeof func === 'function' && func.apply(context, args)
      }, wait)
    }
  }
}

Drosselung

Drosselung kann als die Ausführung einer Funktion alle n-mal verstanden werden.

Drosselungsimplementierung

/**
 * @desc 函数节流
 * @param {Function} func 函数
 * @param {Number} wait 延迟执行毫秒数
 * @param {Boolean} type true 表示时间戳版，false 表示定时器版
 */
function throttle(func, wait, type) {
  let previous
  let timeout
  if (type) {
    previous = 0
  } else {
    timeout
  }
  return function () {
    let context = this
    let args = arguments
    if (type) {
      let now = Date.now()
      if (now - previous > wait) {
        typeof func === 'function' && func.apply(context, args)
        previous = now
      }
    } else {
      if (!timeout) {
        timeout = setTimeout(() => {
          timeout = null
          typeof func === 'function' && func.apply(context, args)
        }, wait)
      }
    }
  }
}

Der Unterschied zwischen Anti-Shake und Drosselung

Verwenden Sie ein Textfeld zur Texteingabe, um zu veranschaulichen, dass der Benutzer weiterhin Eingaben macht, wenn die Zeit auf 1 Sekunde eingestellt ist Text: Wenn es sich um eine nicht sofortige Ausführung von Anti-Shake handelt, wird die Funktion 1 Sekunde nach dem Stoppen der Eingabe ausgeführt, und sie wird nur einmal ausgeführt. Wenn es sich um eine sofortige Ausführung von Anti-Shake handelt, wird die Funktion sofort ausgeführt , und nur einmal ausgeführt. Drosselung bedeutet, dass eine Funktion jede Sekunde, möglicherweise mehrmals, während einer Benutzereingabe ausgeführt wird.

Der Unterschied zwischen Anti-Shake- und Drosselungsaufrufen

Sowohl die Anti-Shake-Funktion als auch die Drosselungsfunktion im folgenden Code werden 10000000 Mal aufgerufen, aber die Anti-Shake-Funktion wird nur ausgeführt einmal, aber es gibt viele Drosselungsfunktionen.

let debounceCallback = debounce(function () {
  console.log('debounceCallback')
}, 1000, false)

for (let i = 0; i < 10000000; i++) {
  debounceCallback()
}

let throttleCallback = throttle(function () {
  console.log('throttleCallback')
}, 1000, false)

for (let i = 0; i < 10000000; i++) {
  throttleCallback()
}

Empfohlenes Tutorial: „JS-Tutorial“

Das obige ist der detaillierte Inhalt vonDie Verwendung der Anti-Shake- und Throttling-Funktion ist leicht verständlich. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!