Wie warte ich, bis der Benutzer in einer Texteingabe aufgeschrieben hat, um eine Funktion aufzurufen?

Question

Ich entwerfe eine Website und möchte 1 Sekunde nach der letzten Benutzereingabe eine Funktion aufrufen können. Ich habe versucht mit onKeyUp, aber es wartete 1 Sekunde nach dem ersten Tastendruck.

Weiß jemand, wie das möglich wäre?

Answer 1

Ein weiterer ähnlicher Ansatz, ohne Globals:

var typewatch = function(){ 
    var timer = 0; 
    return function(callback, ms){ 
     clearTimeout (timer); 
     timer = setTimeout(callback, ms); 
    } 
}();  

...

<input type="text" onKeyUp="typewatch(function(){alert('Time elapsed!');}, 1000);" /> 

können Sie diesen Schnipsel here.

Answer 2

Nevermind, ich habe einen Weg gefunden, es zu tun. Ich rufe bei jedem onkeyup() eine Funktion auf, die einen Zähler inkrementiert und dann 1 Sekunde wartet. Nach den 1-Sekunden verstrichen ist, verringern sie den Zähler und überprüfen, ob es auf 0.

var keystrokes = 0; 
function askAgain() 
{ 
    ++keystrokes; 
    setTimeout(reveal, 1000); 
} 

function reveal() 
{ 
    --keystrokes; 

    if (keystrokes == 0) 
     alert("Watch out, there is a snake!"); 
} 

Answer 3

Sie ein keyDown kann gleich ist (oder keyUp) Ereignis, das eine Funktion setzt in 1 Sekunde und wenn der Benutzer tippt noch laufen Innerhalb dieser Sekunde können Sie das Timeout löschen und ein neues setzen.

z.

var t;  

function keyDown() 
{ 
    if (t) 
    { 
    clearTimeout(t); 
    t = setTimeout(myCallback, 1000); 
    } 
    else 
    { 
    t = setTimeout(myCallback, 1000); 
    } 
} 

function myCallback() 
{ 
    alert("It's been 1 second since you typed something"); 
} 

Answer 4

Ändern Sie einfach Ihre HTML-Eingabe und werfen Sie diese erste Zeile in Ihre vorhandenen Funktionen, so dass Sie nichts, das Sie haben, recode müssen. Es werden keine alten Code-Aufruf von Funktionen beeinflussen entweder, denn wenn onkeypress nicht gesetzt ist, dann mykeypress immer < 1.

var mykeypress=0; 
var mysleep=1000; //set this higher if your users are slow typers 
function mytest(id,text) { 
    mykeypress--; if(mykeypress > 0) { return; } 
    //anything you want when user stops typing here 
    alert("Keypress count at "+mykeypress+" ready to continue 
id is "+id+" arguement is "+text); 
} 

input type="text" name="blah" id="55" onkeypress="mykeypress++" 
onkeyup="myid=this.id;setTimeout(function(){mytest(myid,'a test')},mysleep)" 
REVERT to old way seamlessly: 
input type="text" name="blah" id="55" onkeyup="mytest(this.id,'a test')" 

Answer 5

Es gibt einige einfache plugin sein wird, die ich gemacht habe, das tut exacly das. Es erfordert viel weniger Code als einige vorgeschlagene Lösungen und es ist sehr leicht (~ 0,6kb)

Zuerst erstellen Sie Bid Objekt als bumped jederzeit sein kann. Jede Bump wird verzögern feuern Bid Rückruf für die nächste gegebene Zeit.

var searchBid = new Bid(function(inputValue){ 
    //your action when user will stop writing for 200ms. 
    yourSpecialAction(inputValue); 
}, 200); //we set delay time of every bump to 200ms 

Wenn Bid Objekt fertig ist, müssen wir es irgendwie bump. Lassen Sie uns stoßen an keyupevent anschließen. 'Verzögert' (gestoßen) für den nächsten 200ms

Jedesmal Benutzer Taste drückt, wird Gebot:

$("input").keyup(function(){ 
    searchBid.bump($(this).val()); //parameters passed to bump will be accessable in Bid callback 
}); 

---

Was hier passiert ist. Wenn 200 ms verstrichen sind, ohne dass sie erneut "angestoßen" wurden, wird der Rückruf ausgelöst.

Auch Sie bieten 2 zusätzliche Funktionen zum Anhalten haben (wenn Benutzer gedrückt esc oder außerhalb Eingang zum Beispiel angeklickt) und für die Endbearbeitung und Callback-Brennen sofort (zum Beispiel beim Drücken Benutzer Enter-Taste):

searchBid.stop(); 
searchBid.finish(valueToPass);