umilove98의 블로그

lodash.js 이벤트 발생 시 함수 실행 빈도를 조절해보자 본문

language,framework,library/Javascript

lodash.js 이벤트 발생 시 함수 실행 빈도를 조절해보자

umilove98 2022. 10. 12. 23:54
반응형

화면 스크롤 시 이벤트를 발생시켜  콘솔에 출력하는 코드를 작성해 보았다.

 

window.addEventListener('scroll', function () {
  console.log('scroll!');
});

브라우저 창을 스크롤 할 경우 이벤트가 발생하여 콘솔에 scroll! 이라고 출력하는 코드이다.

 

아주 잠깐 스크롤을 움직였을 뿐인데 굉장히 많은 콜백함수 호출이 일어났다.

 

이런 간단한 기능 하나라면 상관없겠지만 기능이 많아지고 복잡해지면 이런 잦은 콜백함수 호출로 인해 사이트의 반응이 느려질 수 있다.

 

이를 해결하기 위해 lodash.js 라이브러리를 사용할 수 있다.

 

lodash.js - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers

 

lodash.js - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers

A utility library delivering consistency, customization, performance, & extras. - Simple. Fast. Reliable. Content delivery at its finest. cdnjs is a free and open-source CDN service trusted by over 12.5% of all websites, serving over 200 billion requests e

cdnjs.com

lodash 웹사이트에 접속하면

다음과 같은 화면을 볼 수 있는데 표시한 위치를 클릭하면 코드가 복사된다. 

 

해당 코드를 적용하기 원하는 문서의 html의 <head>부분에 입력해준다. 

 

그 후 처음의 js 코드를 다음과 같은 형태로 수정한다.

 

window.addEventListener(
  'scroll',
  _.throttle(function () {
    console.log('scroll!!');
  }, 1000)
);

_.throttle() 내부에 실행하고자 하는 콜백함수를 입력하고 , (콤마) 로 구분한 뒤 원하는 시간 간격을 ms단위로 입력한다. 

 

더 오랜 시간 스크롤을 하였음에도 이벤트가 발생한 횟수가 확연히 줄어들었다. 

_.throttle() 을 이용하면 이벤트가 발생하여도 정해진 시간 간격에 따라 콜백함수를 실행하게 된다.

 

 

반응형

'language,framework,library > Javascript' 카테고리의 다른 글

node.js 버전을 여러가지 관리하며 사용하고 싶다. NVM  (0) 2022.10.21
페이지 맨 위로 스크롤 하고 싶다 ScrollToPlugin  (0) 2022.10.21
gsap 자바스크립트로 애니메이션 효과 적용하기  (0) 2022.10.13
window.scrollY 화면의 스크롤 위치를 이용하여 이벤트 처리하기  (0) 2022.10.13
defer 전체 HTML문서를 전부 읽은 후 자바스크립트를 동작시키고 싶다  (0) 2022.10.10
'language,framework,library/Javascript' Related Articles more