[JS] 타이머

Jimyu·2023년 12월 10일
0

그동안 애니메이션이나 서버 통신 등의 경우에 썼던 setTimeout, setInterval..!
이외에도 플젝하면서 필요할까봐 스로틀 등에 대해서도 잠깐 알아보고 하긴 했었지만 원리나 차이 등에 대해서 깊게 알지 못했는데 41장에서 자세히 다뤄줘서 답답했던 부분이 해소되었다✨

호출 스케줄링?

  • 함수를 명시적으로 호출해서 바로 실행되도록 하는 것이 아니라, 일정 시간이 지나고 호출되도록 함수 호출을 예약하는 걸 호출 스케줄링이라고 한다.
  • setTimeout, setInterval 이 둘이 호출 스케줄링 함수이다.
    JS는 싱글스레드로, 하나의 실행 컨텍스트 스택을 가지기 때문에 멀티태스킹을 할 수 없으므로 타이머 함수들은 비동기 방식으로 동작한다.

setTimeout vs setInterval

  • setTimeout : 특정 시간 이후 단 한 번 함수 호출
  • setInterval : 특정 시간 간격으로 함수 호출

디바운스 vs 스로틀

공통점

  • 짧은 간격으로 연속 발생하는 이벤트에 대한 핸들러가 너무 많이 호출되어서 성능 문제가 생기지 않도록 과도한 이벤트 핸들러 호출 방지를 하는 프로그래밍 기법

차이점

디바운스 : 특정 시간이 경과한 이후 이벤트 핸들러가 단 한 번 호출되도록 한다. 즉, 여러 이벤트를 그룹화하고 가장 마지막 이벤트에 대해서만 함수가 호출되도록 한다.

  • 사용 예시 : 입력 필드 자동완성 UI 구현, 버튼 중복 클릭 방지 처리 등

스로틀 : 일정 시간 간격으로 이벤트 핸들러가 최대 한 번 호출됨. 즉 이벤트를 그룹화해서 일정 시간 단위로 이벤트 핸들러 호출 주기를 만든다.

  • 사용 예시 : scroll 이벤트 처리, 무한 스크롤 UI 구현
profile
블로그 이전 : https://jimyu-s-record.tistory.com/

0개의 댓글