-
JavaScript - 쓰로틀링(Throttling)내가 보기 위해 쓰는 것/Javascript 2019. 10. 23. 10:41
쓰로틀링은 주로 이벤트에 사용하는 기능이다.
흔한 경우로 웹이 인터렉션 효과를 넣다 보면 쓰로틀링이 필요한 시점이 생긴다.
예를 들어보자면 scroll 이벤트가 있다.
box가 scroll 될 때마다 display none~block으로 토글되는 이벤트가 있다고 가정해보자.
let target_state = true; function event_scroll() { const target = document.querySelector('.box') target_state = !target_state if(target_state){ target.style.display = 'block' }else{ target.style.display = 'none' } console.log('scroll!!') }
event function이 계속 실행되고 있다. 클라이언트 입장에선 토글 버튼을 광클할 수도 있고 여러 방법으로 정성스럽게 만든 효과들을 고장낼 수 있다.
그래서 이런 경우에 필요한 것이 쓰로틀링이다.
쓰로틀링이란 function을 불러오는 주기를 제한하는 것이다.
예를들어 scroll을 미친듯이 해도 쓰로틀링을 넣으면 n초마다만 실행할 수있어! 하고 쿨타임을 주는 것이다.
위 예제에 쓰로틀링을 추가해보자.
let target_state = true let timer function event_scroll() { if(!timer){ timer = setTimeout(() => { const target = document.querySelector('.box') target_state = !target_state if(target_state){ target.style.display = 'block' }else{ target.style.display = 'none' } console.log('scroll!!') timer = null }, 1000); } }
이벤트가 1초의 간격을 두고 실행 되고 있다. 풀 소스
더보기<!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body onscroll='event_scroll()'> <div class='box'></div> <script> let target_state = true let timer function event_scroll() { if(!timer){ timer = setTimeout(() => { const target = document.querySelector('.box') target_state = !target_state if(target_state){ target.style.display = 'block' }else{ target.style.display = 'none' } console.log('scroll!!') timer = null }, 1000); } } </script> <style> .box{ width: 100px; height: 100px; position: fixed; top: 100px; left: 30%; background-color: #000000; } body{ height: 10000px; } </style> </body> </html>'내가 보기 위해 쓰는 것 > Javascript' 카테고리의 다른 글
JavaScript - var, let, const의 차이 (0) 2019.10.25 JavaScript - Prototype & Prototype chain (프로토타입과 프로토타입 체인) (0) 2019.10.24 Javascript - Closure (0) 2019.10.07 Javascript - 호이스팅개념 (0) 2019.10.07 javascript 에서 xml parsing 하기 (0) 2019.09.25