0719

Clone Coding

throttle / debounce

throttle

• 일정 간격마다 함수를 실행
• 그래서 언제 쓰이는데?
  • 스크롤 이벤트 실시간으로 감지할 때 (지금처럼 스크롤 시간에 따른 포인트 적립시에 사용)
  • 마우스 드래그 이벤트를 실시간으로 감지할 때
• cf. 어원 알아보기
  • 자동차의 스로틀(가속 페달)에서 유래
  • 스로틀은 엔진으로 들어가는 공기/연료의 양을 조절함
  • 아무리 페달을 많이 밟아도 최대 출력은 제한됨
    
    사진 출처: 나무위키 (나무위키 꺼라 ㅡㅡ)

debounce

• 마지막 호출 후 일정 시간이 지나면 함수를 실행

• 그래서 언제 쓰이는데?

  • 타자 다 친 다음에 검색해야 될 때
    • 연관검색어 같은건 throttle 사용
  • 브라우저 창 크기 인식할 때
    • 마지막 값만 사용하면 되니까

• cf. 어원 알아보기

  • 전자 회로의 바운싱 현상에서 유래
  • 스위치를 누를 때 접점이 여러번 튕기는 (bounce) 현상을 제거
  • 마지막 신호 후 일정 시간 기다려서 안정된 신호만 인식
  • 스위치를 연속으로 여러번 와다다 눌러도 마지막 신호만 인식하는 것 (게임패드 생각)
  • https://blog.naver.com/jamduino/221096134736

• 참고 자료

  • https://velog.io/@yrnana/scroll-event에-rAF-throttle을-적용해야할까
  • https://webclub.tistory.com/607

chorme performance 읽기

• throller 적용했을 때
  
• 적용 안 했을 때
  
• event time은 이벤트 처리에 걸린 총 시간
  • 스크롤 이벤트가 몇 번 호출 됐고, 스크립트 실행에 총 얼마만큼의 시간이 걸렸는지 등..
• 스로틀 적용했을 땐 94.2ms, 일반 스크롤일땐 677ms ㄷㄷ

Type Script

// 초기값 0으로 설정
const inactivityTimeout = useRef<number>(0);

// 초기값이 있을 수도 있고 없을 수도 있고
// 있으면 number로 설정하고
const inactivityTimeout = useRef<number | undefined>(undefined);