Debounce 기능과 Throttle 기능의 구현 원리

이 글은 주로 Debounce 기능과 Throttle 기능의 구현 원리를 소개합니다. 이제는 모든 사람과 공유합니다. 도움이 필요한 친구들은

Debounce 및 Throttle 기능의 원리와 구현

• 을 참조하세요. 디바운스와 디바운스는 실제 논리적 처리 프로세스의 실행을 줄여 이벤트 처리 기능의 실행 성능을 향상시키는 방법입니다. Throttle은 이벤트 트리거 수를 크게 줄이지 않습니다. 둘은 실제로 개념적 이해 측면에서 혼란스럽습니다.

• debounce는 함수가 특정 기간 내에 한 번만 실행되도록 하는 반면, throttle은 함수가 고정된 속도로 실행되도록 합니다. 자주 발생하는 DOM 이벤트를 처리할 때 사용자 경험을 크게 향상시킬 수 있습니다.

크기 조정, 스크롤, 마우스 이동 및 keydown/keyup/keypress와 같은 이벤트를 처리할 때 일반적으로 이러한 이벤트가 너무 자주 트리거되는 것을 원하지 않습니다. 특히 리스너가 많은 계산을 포함하거나 비용이 많이 드는 경우에는 더욱 그렇습니다. 자원 운영.

얼마나 자주요? mousemove를 예로 들어 보겠습니다. DOM 레벨 3 규정에 따르면 "마우스가 계속해서 움직이면 브라우저는 여러 개의 연속적인 mousemove 이벤트를 트리거해야 합니다." mousemove 이벤트를 트리거하기 위해 마우스를 움직이는 속도를 허용합니다. (물론 마우스를 "스와이프"하는 등 충분히 빠르게 움직이는 경우 브라우저는 이 이벤트를 트리거하지 않습니다.) 크기 조정, 스크롤 및 키*와 같은 이벤트는 유사합니다.

1. 디바운스 함수가 ​​하는 일은 함수가 여러 번 호출되더라도 특정 연속 기간 내에 한 번만 실행되도록 하는 것입니다. 사용자의 조작 중에 브라우저가 이벤트를 발생시키는 횟수만큼 듣기 기능을 실행하는 것이 아니라, 사용자가 일정 시간 동안 조작을 멈춘 후에 해당 듣기 기능이 실행되기를 바랍니다.

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는 계속해서 자주 호출되는 클로저를 반환하지만 클로저 내부에서는 원래 함수 fn의 실행이 제한되어 연속 작업이 중지된 후 fn이 한 번만 실행되도록 강제합니다.

스로틀

스로틀의 개념은 기능이 실행되는 속도를 고정하는 소위 "스로틀"이라는 개념을 이해하기 더 쉽습니다. 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>두 가지를 적용하면 바로 효율이 나옵니다. 여전히 디바운스와 스로틀의 차이점을 완전히 이해할 수 없는 경우 이 페이지로 이동하여 두 가지를 시각적으로 비교할 수 있습니다. <br><img src="/static/imghwm/default1.png" data-src="https://img.php.cn//upload/image/571/717/740/1531471276493544.png?x-oss-process=image/resize,p_40" class="lazy" title="1531471276493544.png" alt="Debounce 기능과 Throttle 기능의 구현 원리"></p><p>위 내용은 이 글의 전체 내용입니다. 모든 분들의 학습에 도움이 되었으면 좋겠습니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 주목해주세요! </p><p>관련 추천: </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">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">JavaScript에서 HTTP 요청을 만드는 방법 사용</a><br></p>

위 내용은 Debounce 기능과 Throttle 기능의 구현 원리의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!