Comprendre facilement l'utilisation de la fonction anti-tremblement et limitation

Avant-propos

Fonction anti-shake et throttling, ce point de connaissance est plus susceptible d'être demandé lors des entretiens.

Anti-shake

La version à exécution non immédiate de l'anti-shake peut être comprise comme l'exécution d'une fonction une fois après n fois. La version à exécution immédiate de l'anti-shake consiste à exécuter une fonction immédiatement.

Mise en œuvre de l'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)
    }
  }
}

Limitation

La limitation peut être comprise comme l'exécution d'une fonction toutes les n fois.

Implémentation de la limitation

/**
 * @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)
      }
    }
  }
}

La différence entre l'anti-tremblement et la limitation

Utilisation d'une zone de texte pour saisir du texte à démontrer, si le temps est défini sur 1 s, l'utilisateur continue de saisir text , s'il s'agit d'une exécution non immédiate de l'anti-shake, la fonction sera exécutée 1 seconde après l'arrêt de l'entrée, et elle ne sera exécutée qu'une seule fois. S'il s'agit d'une exécution immédiate de l'anti-shake, la fonction sera exécutée immédiatement. , et exécuté une seule fois. La limitation signifie exécuter une fonction toutes les secondes, éventuellement plusieurs fois, pendant la saisie de l'utilisateur.

La différence entre les appels anti-tremblement et les appels de limitation

La fonction anti-tremblement et la fonction de limitation dans le code ci-dessous sont appelées 1 000 000 fois, mais la fonction anti-tremblement ne sera exécutée que une fois, mais il existe de nombreuses fonctions de limitation.

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()
}

Tutoriel recommandé : "Tutoriel JS"

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!