07/27

김승우·2020년 7월 27일

TIL

목록 보기

1/68

Javascript

1. 디바운싱

2. 쓰로틀링

const _debounce = function (fn, delay) {
  //디바운스된 함수가 참조할 클로저 변수
  let inDebounce = false
  let args = arguments

  return function () {
    //this는 input element === 이벤트 타깃
    let context = this

    //arguments는 입력된 인자인 fn, delay를 제외한 다른 인자 X => 틀린 이유
    //debounce함수의 arguments와 return function(){}의 arguments는 따로 존재
    //따라서 debounce의 arguments는 fn,delay, inputEvent를 모두 포함하고
    //return된 함수의 arguments는 event만 포함된다.
    //자동으로 event객체가 할당된다
    let args = arguments

    //이벤트가 발생하면 타이머를 초기화 시킨다
    clearTimeout(inDebounce)

    //딜레이 시간 내에 이벤트가 다시 발생하지 않으면 실제 실행할 함수인
    //fn이 실행된다
    inDebounce = setTimeout(() => {
      //fn은 apply를 통해, this값과 args를 전달받는다.
      //apply는 인수들의 단일 배열을 받기때문에 args를 전달받을 수 있다.
      fn.apply(context, args)
    }, delay)
  }
}

const _throttle = function (fn, limit) {
  let inThrottle = false

  return function () {
    let context = this
    let args = arguments

    if (!inThrottle) {
      fn.apply(context, args)
      inThrottle = true
      setTimeout(() => (inThrottle = false), limit)
    }
  }
}