스크롤 이벤트 스로틀 걸기(loadash 사용)

코딩; 2022. 6. 21. 13:15

1. google에 loadash cdn 검색

2. https://cdnjs.com/libraries/lodash.js

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

3. 맨 위쪽 tag 카피

4. 본인 html에 main.js 위쪽에 붙여넣기

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js" integrity="sha512-WFN04846sdKMIP5LKNphMaWzU7YpMyCU245etK3g/2ARYbPK9Ub18eG+ljU96qKRCWh+quCY7yefSmlkQw1ANQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

5. js편집

(예)

const badgeEl = document.querySelector('header .badges');

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

300 → 0.3초마다 부하를 줘서 스크롤 이벤트가 연속적으로 실행되는 것을 방지한다.