YSHUSH

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

Coding/HTML·CSS·JS_BASIC

스크롤 이벤트 스로틀 걸기(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초마다 부하를 줘서 스크롤 이벤트가 연속적으로 실행되는 것을 방지한다.

 

'Coding > HTML·CSS·JS_BASIC' 카테고리의 다른 글

16:9 화면 비율 만들기  (0) 2022.06.28
'Coding/HTML·CSS·JS_BASIC' Related Articles more