timeout 2

[자바스크립트] 쓰로틀링 - 이벤트 실행 제어하기

[자바스크립트] throttling - 이벤트 실행횟수 제한 너무 많은 이벤트가 지속적으로 발생할 시, 과부화를 일으켜 사용자 환경에 버벅거림을 줄 수 있다. 이를 막기위해, 하나의 이벤트가 실행되는 동안은 같은 이벤트가 또 실행되지 않도록 제한을 주는 기술이다. [사용법] var temp; document.addEventListener('scroll', function() { if(!temp) { temp = setTimeout(function() { temp = null; //type your code here }, 500); } }) [간단원리] 이벤트 발생시, 먼저 timeout 이 존재하는지 확인 후, 존재한다면 아무것도 안함 만약 timeout 이 존재하지 않는다면, 새로운 timeout 을 ..

[자바스크립트] 디바운싱 - 마지막 이벤트만 실행하기

[자바스크립트] debouncing - 맨 마지막 이벤트만 캐치하기 너무 많은 이벤트가 지속적으로 발생할 시, 과부화를 일으켜 사용자 환경에 버벅거림을 줄 수 있다. 이를 막기위해 동일한 이벤트를 묶어서, 맨 마지막에 발생한 이벤트만 실행되게 만드는 기술이다. 특히 Ajax call 을 동반한 스크롤, 검색창, 버튼클릭 이벤트에 주로 쓰일 수 있겠다. (Ajax 요청을 최소화) [사용법] var temp; document.addEventListener('scroll', function() { if(temp) { clearTimeout(temp); } temp = setTimeout(function() { //type your code here }, 500); }) [간단원리] 이벤트 발생시, 먼저 tim..