StackOverflow의 태그에 대한 AutoSuggest 기능으로 모든 키 스트로크에서 쿼리하지 않는 방법

Question

Jquery를 사용하여이 사이트의 텍스트 영역 아래에서 사용할 수있는 태그에 대해 autosuggest 기능과 유사한 기능을 구현하려고합니다. 몇 번의 키 입력 후에 요청이 전송되는 방식을 알아 내려고 노력 중이며 모든 키 입력 이후가 아닙니다. 내 앱에서 요청을 실행하기 위해 'keyup'이벤트를 사용하고 있습니다. 너무 많은 서버 히트가 발생하고 성능에 영향을 미칠 수 있다는 것을 깨닫게되었습니다.

일부는 stackOverflow가 모든 키 업에서 실행되는 쿼리를 수행하지 않는 것과 같은 일을 어떻게 구현할 수 있는지 설명 할 수 있다면 정말 멋질 것입니다.

Answer 1

var activity = new ActivityTimer(1000, function() { 
    doSearch(); 
}); 

$("#searchBox").keyup(function(){ activity.reset() }); 

function ActivityTimer(deadline, callback) { 
    var timer = -1; 

    this.reset = function() { 
     this.cancel(); 
     timer = setTimeout(callback, deadline); 
    }; 

    this.cancel = function() { 
     if(timer >= 0) { 
      clearTimeout(timer); 
      timer = -1; 
     } 
    }; 
} 

Answer 2

나는 내 Windows 응용 프로그램 중 하나에서 비슷한 기능을 가지고 있습니다. 사용자가 문자를 입력하면 타이머가 1 초 간격으로 시작됩니다. Tick ​​이벤트에서 검색이 시작됩니다. 사용자가 다시 입력하면 타이머가 다시 시작됩니다. 따라서 키보드가 1 초 이상 유휴 상태 인 경우에만 검색이 수행됩니다.

짧은 샘플 (는 C#으로하지만 따라 충분히 쉬운) : 나는 자바 스크립트에 경험이 아니에요

public partial class Form1 : Form 
{ 
    private System.Windows.Forms.Timer timer = new System.Windows.Forms.Timer(); 

    public Form1() 
    { 
     InitializeComponent(); 

     timer.Interval = 1000; 
     timer.Tick += new EventHandler(timer_Tick); 
    } 

    void timer_Tick(object sender, EventArgs e) 
    { 
     timer.Stop(); 

     // Do search, or what ever you want to do 
     Console.WriteLine("Searching..."); 
    } 

    private void textBox1_KeyDown(object sender, KeyEventArgs e) 
    { 
     if (timer.Enabled) 
     { 
      timer.Stop(); 
     } 

     timer.Start(); 
    } 
} 

하지만 here에서 anwswer 내가 생각하는 당신을 도울 것입니다 :

<input name="domain" type="text" id="domain" onKeyUp="javascript:chk_me();"> 

var timer; 
    function chk_me(){ 

     clearTimeout(timer); 
     timer=setTimeout(function validate(){...},1000); 
    } 

Answer 3

는 "디 바운싱"

라고 언급하는 방법 나는 보통 "Deboun이 내 모든 스크립트

var debounce=function(func, threshold, execAsap) { 
    var timeout; 
    return function debounced() { 
     var obj = this, args = arguments; 
     function delayed() { 
      if (!execAsap) 
       func.apply(obj, args); 
      timeout = null; 
     }; 
     if (timeout) 
      clearTimeout(timeout); 
     else if (execAsap) 
      func.apply(obj, args); 
     timeout = setTimeout(delayed, threshold || 100); 
    }; 
}; 

그리고 나는 디 바운스 도움이됩니다 아무것도 할 때마다 나는이 일반적으로 사용할 수 있습니다 하단에있는 CE "기능

그래서 코드가

$("#search_box").keyup(debounce(function() { 
    //do stuff in this function 
} 
,350 /*determines the delay in ms*/ 
,false /*should it execute on first keyup event, 
     or delay the first event until 
     the value in ms specified above*/ 
)); 

로 기록 될 것이다

비슷한 용도로 Facebook Style AJAX Search을 참조하십시오 ...