여기 스크롤하는 고양이가 있다
이 무자비한 고양이는 당신이 만든 페이지를 계속!!!계속!!! 스크롤하고있다.
이 무자비한 고양이는 당신이 만든 페이지를 계속!!!계속!!! 스크롤하고있다.당신은 고양이가 스크롤을 할 때마다 하단의 페이지 내용을 애옹님께 보여줄 수 있도록 구현해야한다. 스크롤 이벤트가 발생할 때마다 새로운 데이터를 보여주도록 페이지를 구현했다면 우리가 인지하기는 어렵지만 스크롤 드래그 도중에는 많은 양의 스크롤 이벤트가 발생하게 된다. 그때마다 매번 이벤트에 대한 콜백이 발생하게 되고 그에 대한 콜백을 수행하게 된다면 너무 많은 리소스가 필요하다.
이처럼 과도한 이벤트 횟수의 실행으로 이벤트 핸들러가 동일 작업을 연속적으로 수행하는 경우 성능 문제가 발생한다. 그렇다면 이벤트 핸들러에 제약을 걸어서 제어할 수 있는 수준으로만 이벤트를 발생시키는건 어떨까? 바로 Debounce와 Throttle을 사용해서 말이다!
Debounce와 Throttle은 DOM 이벤트를 기반으로 JavaScript를 성능상의 이유로 이벤트를 제어하는 방법이다.
두 기술 모두 시간에 따라 이벤트를 몇 번 실행할지 제어하지만 이벤트를 발생시키는 시점이 다르다.
Debounce
연속적으로 발생하는 이벤트들 중 마지막 이벤트(또는 제일 처음)만 실행
이벤트를 그룹화하여 특정시간이 지난 후 하나의 이벤트만 발생하도록 하는 기술로 입력이 끝날때까지 기다리는 방식
어디에 쓰일까?
검색창에 글자를 입력할 때를 가정해보자. 엔터를 누르지 않아도 검색 결과를 바로 보여줘야하는 경우, 키보드 입력 이벤트가 들어올 때마다 쿼리를 날린다면 필요 이상으로 많은 쿼리를 전송해야한다. 이는 곧 비용 문제로 직결된다.
검색하고자 하는 검색어를 다 입력했을 때 쿼리를 날린다면 불필요하게 전송하는 쿼리가 줄어들게 되므로 비용 절감이 가능하다.
Throttle
이벤트가 일정 시간 동안 한번만 실행되도록 함
이벤트를 일정한 주기마다 발생하도록 하는 기술로 입력이 시작되면 일정 주기로 계속 실행한다.
정기적으로 기능 실행을 보장
어디에 쓰일까?
무한 스크롤되는 페이지를 제작한다면 사용자가 아래로 스크롤할 때마다 새로운 컨텐츠를 보여주어야한다. throttle을 사용한다면 사용자의 위치가 footer로부터 얼마나 떨어져있는지 확인하고, 지정한 간격을 넘어갈 때 새로 컨텐츠를 가져오는 방법을 사용할 수 있다.
위 두 가지는 underscore의 _.debounce와 _.throttle을 통해 사용할 수 있다.