Debouncing 과 Throttling

🍖Debounding : 연이어 호출되는 함수들 중 마지막 함수만 호출하도록 하는 것

-> ajax 검색에 주로 사용

 

var timer;

document.querySelector('#input').addEventListener('input', function(e) {

   if(timer) {

       clearTimeout(timer);

   }

   timer = setTimeout(function() {

       $.ajax요청

   }, 200 );

});

 

🍖Throttling : 마지막 함수가 호출된 후 일정시간이 지나기 전에 다시 호출되지 않도록 하는 것

-> 스크롤에 주로 사용

 

var timer;

document.querySelector('#input').addEventListener('input', function(e) {

   if(!timer) {

       timer = setTimeout(function() {

            timer = null;

            $.ajax요청 

       }, 200);

   }

 

}