[js]디바운싱과 쓰로틀 debounce Throttle 쓰로틀링

참고 https://webclub.tistory.com/607

// 디바운스
function Event(){
	// 스크롤 이벤트 실행 함수 코드
}
  let timer;
$(window).scroll(function () {
  if(timer){
    clearTimeout(timer)
  }
  timer = setTimeout(()=>{
  Event()
  },500)
})

//쓰로틀
function Event(){
 실행될 함수 코드
}

let timer;
$(window).scroll(function(){
  if(!timer){
    timer = setTimeout(function(){
      timer = null; 
      Event()
    },1000)
  }
})

ex) 스크롤 이벤트 setTimeout 10초 설정

디바운싱

→ 모든 스크롤이 끝난 후 이벤트 발생

쓰로틀 

→ 스크롤 발생 시 setTimeout 10초 실행, 함수가 끝나기 전 스크롤이 발생해도 이벤트 발생X

 

*실행 이벤트 밖에 let timer 빼기