Jquery.ba-throttle-debounce.js

1 개요[ | ]

jQuery플러그인 ba-throttle-debounce
jquery.ba-throttle-debounce.js 예시

이벤트에 지연시간을 적용하여 처리하도록 하는 jQuery 플러그인
지정한 시간(단위: 밀리초)동안 더 이상 그 이벤트가 없을 때에 지정한 함수를 수행함
연속된 키 입력에 한글자한글자 일일이 반응하지 않고 일정기간 유예기간을 두고 모아서 한번만 반응함
활용처: 검색창, 회원가입(아이디 중복 확인 등)
참고: 최신버전은 jQuery에 의존성이 없는 것이 나와 있음

<input class="text" type="text" name="whatever">
<ul>
  <li>not-debounced: <span id="text1"></span></li>
  <li>debounced: <span id="text2"></span></li>
</ul>

<script src='//code.jquery.com/jquery.min.js'></script>
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery-throttle-debounce/1.1/jquery.ba-throttle-debounce.min.js'></script>
<script>
var count1 = 0;
var count2 = 0;

function update1() {
  count1++;
  $('#text1').text( count1 + ' times. [' + $(this).val() + ']' );
}
function update2() {
  count2++;
  $('#text2').text( count2 + ' times. [' + $(this).val() + ']' );
}

$('input.text').keyup( update1 );
$('input.text').keyup( $.debounce( 300, update2 ) );
</script>

→ update1은 keyup 이벤트 발생시마다 수행됨

→ update2는 keyup 이벤트가 발생해도 300밀리초 동안 더 이상 keyup이 없을 때에만 수행됨

2 같이 보기[ | ]

jQuery 플러그인

3 참고[ | ]