스크롤 이벤트
자바스크립트로 채팅기능을 구현중에 스크롤을 올리면 일정 높이에 다다르면 이전 채팅기록을 불러오게 만들었습니다.
그런데 이벤트가 너무 많이 발생해서 lodash에 throttle을 사용하려 합니다.
쓰로틀이란?
쓰로틀(throttle)이란 연속되는 이벤트의 과부화를 막기 위해 일정시간마다 호출되도록 도와주는 메서드입니다. 이를 사용하기 위해선 lodash를 먼저 설치해야 합니다.
npm install lodashlodash를 import 해옵니다.
import _ from "lodash";_에서 꺼내 씁니다.
이런식으로 적용합니다.
_.throttle(event, time)
첫 번째 인자에 사용할 일정시간마다 호출할 이벤트 함수를 넣고 두 번째 인자는 일정시간을 지정하면 됩니다. 사진을 보면 저는 500ms(0.5초)마다 불러오게 만들었습니다. 그리고 결과를 보겠습니다.
후기
해결책으로 디바운스와 쓰로틀이 있지만 디바운스를 사용하지 않은 이유는 디바운스는 스크롤 이벤트 종료시점에 이벤트가 끝났다고 인지하고 API가 동작해서 쓰로틀보다 채팅기록호출이 더 느리기 때문입니다. 하지만 디바운스는 같은 이유의 동작으로 쓰로틀보다 대역폭의 양이 더 적기 때문에 방대한 양의 트래픽에서는 더 유용하지 않을까 생각합니다. 후에 저의 채팅기능의 규모가 커진다면 고려해볼 생각입니다ㅎ
