손떨림 방지 및 조절 기능의 사용을 쉽게 이해

머리말

기능 안정화 및 조절, 이런 지식 포인트는 면접에서 물어볼 확률이 더 높습니다.

Anti-shake

즉시 실행되지 않는 Anti-shake 버전은 n번 이후에 한 번 기능을 실행하는 것으로 이해될 수 있습니다. 흔들림 방지의 즉시 실행 버전은 기능을 즉시 실행하는 것입니다.

손떨림 방지 구현

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

Throttling

Throttling은 n번마다 기능을 실행하는 것으로 이해될 수 있습니다.

조절 구현

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

손떨림 방지와 조절의 차이

텍스트 상자를 사용하여 텍스트를 입력하여 시연합니다. 시간이 1초로 설정된 경우 사용자는 계속해서 텍스트를 입력하고, 손떨림 방지가 그렇지 않은 경우 즉시 실행하면 1초 동안 입력이 정지됩니다. 기능 실행 후 1회만 실행됩니다. 손떨림 방지 기능이 즉시 실행되면 해당 기능은 즉시 실행되어 1회만 실행됩니다. 조절은 사용자 입력 중에 매초마다, 가능하면 여러 번 기능을 실행하는 것을 의미합니다.

손떨림 방지 호출과 조절 호출의 차이점

다음 코드의 손떨림 방지 기능과 조절 기능은 10000000번 호출되는데 손떨림 방지 기능은 한 번만 실행되지만 조절 기능은 실행됩니다. 여러 번.

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

추천 튜토리얼: "JS Tutorial"

위 내용은 손떨림 방지 및 조절 기능의 사용을 쉽게 이해의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!