디바운싱(Debouncing), 쓰로틀링(Throttling)

[devSoyoung]

• DOM 이벤트를 기반으로 실행하는 자바스크립트를 성능상의 이유로 이벤트 제한하는 방법
• 예 : 2011년 트위터 웹 사이트에서 트위터를 스크롤 할 때, 속도가 느려지고 응답이 없는 현상 발생
• 이벤트 핸들러가 많은 연산을 수행하는 경우에 대해 제약을 걸어 제어할 수 있는 수준으로 이벤트를 발생시키는 것을 목표로 하는 기술

활용사례

• 사용자가 창 크기 조정을 멈출 때까지 기다렸다가 resizing event 사용하기 위해
• 사용자가 키보드 입력을 중지 할 때까지 ajax 이벤트를 발생시키지 않기 위해
• 페이지의 스크롤 위치를 측정하고 최대 50ms마다 응답하기를 바랄 경우
• 앱에서 요소를 드래그 할 때 좋은 성능을 보장하기 위해

[devSoyoung]

쓰로틀링(Throttling)

• 이벤트가 발생하여 실행 중일때, 실행된 이벤트가 끝나기전에 발생하는 이벤트는 무시하는 방법
• 타이머를 clear 하는 것이 아니라 실행되는 함수가 종료될 때까지 다른 함수 무시
• 스크롤 이벤트를 일정 간격마다 실행되도록 제한하는 경우에 적합

underscore Throttle

  // Returns a function, that, when invoked, will only be triggered at most once
  // during a given window of time. Normally, the throttled function will run
  // as much as it can, without ever going more than once per `wait` duration;
  // but if you'd like to disable the execution on the leading edge, pass
  // `{leading: false}`. To disable execution on the trailing edge, ditto.
  _.throttle = function(func, wait, options) {
    var timeout, context, args, result;
    var previous = 0;
    if (!options) options = {};

    var later = function() {
      previous = options.leading === false ? 0 : _.now();
      timeout = null;
      result = func.apply(context, args);
      if (!timeout) context = args = null;
    };

    var throttled = function() {
      var now = _.now();
      if (!previous && options.leading === false) previous = now;
      var remaining = wait - (now - previous);
      context = this;
      args = arguments;
      if (remaining <= 0 || remaining > wait) {
        if (timeout) {
          clearTimeout(timeout);
          timeout = null;
        }
        previous = now;
        result = func.apply(context, args);
        if (!timeout) context = args = null;
      } else if (!timeout && options.trailing !== false) {
        timeout = setTimeout(later, remaining);
      }
      return result;
    };

    throttled.cancel = function() {
      clearTimeout(timeout);
      previous = 0;
      timeout = context = args = null;
    };

    return throttled;
  };

[devSoyoung]

디바운싱(Debouncing)

• 이벤트가 빈번하게 발생할때 마지막 이벤트만 실행하는 방법
• 지정된 시간 내에 이벤트가 발생하면 타이머를 취소하고 새로 타이머를 실행
• 텍스트 필드에서 입력이 발생할 때, 자동완성이나 연관검색 기능 등을 제공하는 ajax 요청에 적합

underscore Debounce

  // Returns a function, that, as long as it continues to be invoked, will not
  // be triggered. The function will be called after it stops being called for
  // N milliseconds. If `immediate` is passed, trigger the function on the
  // leading edge, instead of the trailing.
  _.debounce = function(func, wait, immediate) {
    var timeout, result;

    var later = function(context, args) {
      timeout = null;
      if (args) result = func.apply(context, args);
    };

    var debounced = restArguments(function(args) {
      if (timeout) clearTimeout(timeout);
      if (immediate) {
        var callNow = !timeout;
        timeout = setTimeout(later, wait);
        if (callNow) result = func.apply(this, args);
      } else {
        timeout = _.delay(later, wait, this, args);
      }

      return result;
    });

    debounced.cancel = function() {
      clearTimeout(timeout);
      timeout = null;
    };

    return debounced;
  };