javascript : keyup 에 delay 딜레이 설정하기

javascript : keyup 에 delay 딜레이 설정하기

 

1. 함수를 별도로 빼서 clearTimeout 함수로 사용하기

 

<input class = "title"name = "input" />

<script type = "text/javascript">

var itcdelay = (function () {
  // Function
  var itcTimer = 0;
  return function (callback, ms) {
     clearTimeout(itcTimer);
     itcTimer = setTimeout(callback, ms);
  };
})();

// jQuery Code
$(document).ready(function () {
   $('.title').keyup(function () {
      itcdelay(function () {
         alert('Time elapsed!');
      }, 500);
   });
}); 

</script>

 

 

2. clearTimeout 과 setTimeout 조합으로 사용하기

 

<script type = "text/javascript">

   $(document).ready(function () {
      var timeout = null;

      $('#title').keyup(function () {
         clearTimeout(timeout);

         timeout = setTimeout(function () {

            var data = {
               title: $('#title').val()
            };

            $.ajax({
               type: 'get',
               dataType: 'text',
               data: data,
               url: 'result.php',
               success: function (result) {
                  $('#result').html(result);
               }
            });
         }, 1000);
      });
   }); 
   
</script>

 

3. 그냥 귀찮으니.. 라이브러리를 찾자...흠..  bindWithDelay 좋네요..

 

 

https://github.com/bgrins/bindWithDelay

bindWithDelay.js

다운로드

 

 

 

<script type="text/javascript">
    $(document).ready(function () {
       $(".title").bindWithDelay("keyup", function (e) {
          alert('Time Elapsed');
       }, 500);
    });
</script>