사용자가 입력할 때마다 요청을 실행하지 않도록 키프레스 기능을 지연시키는 방법은 무엇입니까?

사용자가 입력할 때마다 요청을 실행하지 않도록 키프레스 기능을 지연시키는 방법은 무엇입니까?

배경

페이지에 여러 개의 드롭다운이 있습니다.첫 번째 드롭다운을 변경하면 선택한 내용에 따라 나머지 드롭다운이 업데이트됩니다.

우리의 경우, 우리는 펀드 데이터를 다룹니다.첫 번째 드롭다운은 "모든 펀드 유형"입니다.헤지 펀드를 선택하면 다음 드롭다운이 헤지 펀드에만 적용되는 옵션으로 필터링됩니다.

고객은 이제 텍스트 필드를 혼합에 넣으라고 합니다. 사용자가 입력을 시작하면 결과에 영향을 줍니다.

따라서 "USD"를 입력하면 두 번째 드롭다운에는 이름에 "USD"가 있는 자금이 있는 옵션만 포함됩니다.

문제

제가 겪고 있는 구체적인 문제는 제가 사용하는 코드에 대한 것입니다.

$('#Search').keypress(function () {
    // trigger the updating process
});

키를 누를 때마다 검색이 시작됩니다.그래서 "USD"를 입력하면 "U", "US" 및 "USD"에 대한 요청 3개가 즉시 수신됩니다.

시간 초과 설정을 시도해 보았습니다.

$('#Search').keypress(function () { 
    // I figure 2 seconds is enough to type something meaningful
    setTimeout(getFilteredResultCount(), 2000);
});

제가 설명한 것을 하기 전에 2초만 기다리면 됩니다.

저는 이 문제가 이전에 해결된 적이 있다고 확신합니다.누가 이 문제를 해결하는 방법을 제안해 주시겠습니까?

이전에 시간 초과를 설정했지만 새 키를 누를 때마다 기존 시간 초과를 지웁니다.이렇게 하면 사용자가 입력을 중지한 경우에만 요청이 전송됩니다.

var timeoutId = 0;
$('#Search').keypress(function () { 
    clearTimeout(timeoutId); // doesn't matter if it's 0
    timeoutId = setTimeout(getFilteredResultCount, 500);
    // Note: when passing a function to setTimeout, just pass the function name.
    // If you call the function, like: getFilteredResultCount(), it will execute immediately.
});

(약 500ms의 시간 제한이 필요합니다.)

언급URL : https://stackoverflow.com/questions/5913181/how-to-delay-keypress-function-when-user-is-typing-so-it-doesnt-fire-a-request