[TIL] 210923 오늘 공부는 디바운싱, 쓰로틀링

추석연휴가 끝났다. 역시나 오늘도 크런치모드로 열일하는 회사다ㅎㅎ

신입 나부랭이라 언제나 하는일은 작고 귀엽지만, 폭풍 구글링으로 버텨내고 있다.

 

디바운싱과 쓰로틀링 요것은 항해때 무한 스크롤을 하려고 lodash 라이브러리를 쓰면서 겉핥기로 했었던 것인데, 현업코드에서 디바운싱을 만나게 되었다.

꼭 라이브러리를 쓰지 않아도, 무한 스크롤을 구현하거나 검색창을 구현하지 않아도 성능을 위해 쓴다.

🌼 디바운싱: 연이어 호출되는 함수들 중 마지막 함수(또는 제일 처음)만 호출하도록 하는 것
 - 검색어 개발에서 많이 쓰임
 - 만약 검색어 개발하는데 쓰로틀링을 쓴다면? 이상한(미완성된) 검색어에도 무조건 일정 시간마다 호출되기 때문에 서버에 부하를 줄 수 있으니 디바운싱을 쓴다.
 - 꼭 검색어 개발에만 쓰이는것이 아니다. 어떤 함수를 호출했을때, 여러 중복된 동작이 실행된다면 setTimeout을 통해 디바운싱한다. 즉 중복 함수 중 마지막 함수만 실행되게 하여 성능을 최적화 하는 것. 

코드가 좀 이상하지만, 어떤 함수를 실행할 부분에 setTimeout을 해주고 100ms 를 시간으로 걸어놓으면 100ms동안 함수가 실행되지 않으면 마지막 함수가 실행된다! 

~~~~~~ {
	if(!timer){
	timer = setTimeOut(()=>{
    	//어떤 함수 실행
    },100);
	};
};

 

🌼 쓰로틀링: 마지막 함수가 호출된 후 일정 시간이 지나기 전에 다시 호출되지 않도록 하는 것
      = 매 밀리세컨드마다 최대 한 번만 호출될 수 있도록 하는 것
 - 무한 스크롤에서 쓰임
 - 조금 더 공부해보도록 하자...!