2022-02-02 TIL

Fact

• 자바스크립트 짤봇 미션완료

Findings

• Throttle, Debounce 둘 다 Dom 이벤트를 기반으로 실행하는 자바스크립트를 성능상의 이유로 JS의 양적인 측면, 즉 이벤트를 제어하는 기법이다. 예를 들어 사용자가 스크롤을 드래그한다고 가정하면, 이 행위로 인해 수많은 스크롤 이벤트가 발생할 수 있다. 나 같은 경우는 짤봇 검색기 과제를 진행하던 중 엔터를 치지 않더라도 결괏값을 나오게 하려고 하다가 문장이 완성이 되지도 않았는데 수많은 request를 보내는 것을 콘솔로 확인했다. 이러한 문제들을 Throttle, Debounce를 사용하면 해결할 수 있다. 하지만 두 개에 차이점이 존재한다 Debounce는 이벤트를 그룹화하여 특정 시간이 지난 후 하나의 이벤트만 발생하도록 하는 기술이고, Throttle은 이벤트를 일정한 주기마다 발생하도록 하는 기술이다. Debounce는 여러 번의 request 문제 중 해당 시간이 지난 마지막 이벤트만 사용하는 방법이고, Throttle은 스크롤을 내리거나 애니메이션을 줄 때 발생하는 정기적인 이벤트에 사용하는 방법이다.

let timer
searchInput.addEventListener('keydown', function(e) {
  if (e.target.className === 'search-keyword') {
    if (timer) {
      clearTimeout(timer)
    }
    timer = setTimeout(async function() {
      const data = await getImage(e.target.value)
      handleSearch(data)
    }, 500)
  }
})

위 코드는 Debounce를 사용한 것이다. 이제 여러번 호출하지 않는다.