jQuery 키 업 이벤트가 여러 번 활성화되어 트리거 될 때마다 두 배가됩니다

Question

내 웹 사이트에 자동 완성 검색 바를 추가했습니다. 사용자가 새 문자를 입력 할 때마다 입력 된 문자열로 시작하는 요소를 데이터베이스에서 조회합니다.

잘 작동하지만 사용자가 다른 캐릭터를 추가하거나 백 스페이스와 같은 키보드 이벤트를 수행 할 때마다 이벤트 활성화가 두 배가됩니다. 1,2,4,8,16 등. 번.

어떻게하면 이벤트 트리거가 누적되지 않고 키보드 이벤트 당 한 번만 .keyup()이 트리거되도록 할 수 있습니까?

다음은 HTML 코드입니다 :

<form> 
<div class="nav-item"> 
    <input class="search-query form-control" placeholder="Items" 
     type="text" name="items" value="" id="id1" /> 
</div> 
</form> 
<hr> 
<div id="id2"> 
</div> 

그리고 여기 jQuery 코드입니다 :

$(document).ready(function() { 
    $('#id1').keyup(function(){ 
    var query = $(this).val(); 
    $.get('/url/', {items: query}, function(data){ 
     $('#id2').html(data); 
    }); 
    }); 
}); 

Answer 1

.

는 관심있는 사람들을 위해, 여기에 내가 해냈어 방법은 다음과 같습니다

(물론 경험이 많은 사용자는 만약 내가 잘못 정정 해줘 주시기 바랍니다!)

는 기본적으로 .one() 방법을 추가하는 것은 그것을 해결. 이벤트는 "#id1" 요소에서 분리되므로 한 번만 실행하면됩니다. 여기에 비교를 위해

$(document).ready(function() { 
    $('#id1').one("keyup", function(){ 
    var query = $(this).val(); 
    $.get('/url/', {items: query}, function(data){ 
     $('#id2').html(data); 
    }); 
    }); 
}); 

위에서 다시 게시로 된 하나 :; '당신의 조각에

$(document).ready(function() { 
    $('#id1').keyup(function(){ 
    var query = $(this).val(); 
    $.get('/url/', {items: query}, function(data){ 
     $('#id2').html(data); 
    }); 
    }); 
}); 

Answer 2

다음 줄을 추가합니다 : 나는 마침내 그것을 해결하는 방법을 알아 냈

$(document).ready(function() { 
var lastTime = Date.now(), milisecondsToWait = 2000;//Here we will wait 2 seconds 
    $('#id1').keyup(function(){ 
    if(Date.now() - lastTime >= milisecondsToWait){//And here 
     var query = $(this).val(); 
     $.get('/url/', {items: query}, function(data){ 
     $('#id2').html(data); 
     lastTime = Date.now(); //And finally here 
     }); 
    } 
    }); 
});