setTimeout: 1회성
setInterval : 타이머 만료될때마다 반복 호출
위는 비동기 처리 방식으로 동작함
디바운스, 스로틀
scroll, resize, input, mouseover는 짧은 시간 간격으로 연속 발생 -> 성능에 저하, 그래서 이를 방지하기위해서는 디바운스와 스로틀을 이용해야한다
디바운스 : 짧은 시간간격으로 연속 발생시 그룹화해 한번만 이벤트 호출되도록함 resize, input, ajax, 버튼 중복 클릭 처리 방지에 효과적
const debounce =(함수, 저정시간) =>{
// 지정시간 보다 짧은 간격으로 이벤트 발생 하다가, 더이상 발생 안하면 호출.
}
스로틀 : 짧은 간격으로 연속 발생시, 일정 시간 간격으로 1번만 호출되도록함. scroll, 무한스크롤 구현에 사용 -> 실무에서는 Underscroe throttle이나 Lodash의 throttle 함수 사용
const throttle =(함수, 저정시간) =>{
// 지정시간에 따라 호출.
}
스로틀, 디바운스 차이점을 잘 보여주는 사이트 :링크
위 링크를 가보면 디바운스는 마우스가 멈췄을때, 스로틀은 시간 간격으로 기록한다는 것을 알수있다.
이해한 내용으로 그려본 debounce, throttle
일단 아래는, 사과나무 농장이고 regular를 보면, 사과를 담자마자 바로 트럭이 출발하고, 그것을 소비자에게 유통하는 구조이다. 좀더 효과적으로 하기위해서는 debounce, throttle이라는 도구를 이용하면 좋은데, debounce 운전자는 사과를 따는 일을 멈췄을 때 출발한다. throttle 운전자는 정해진 시간이되면 칼같이 출발한다.
stack overflow : 출처
개발 인생