관리 메뉴

심재운 블로그

keyup 에 delay 딜레이 설정하기 본문

프로그래밍/jQuery

keyup 에 delay 딜레이 설정하기

재우니 2018.04.25 18:07

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>




0 Comments
댓글쓰기 폼