¿Cómo espero hasta que el usuario haya terminado de escribir en una entrada de texto para llamar a una función?

Question

Estoy diseñando un sitio web y me gustaría poder llamar a una función 1 segundo después de la última entrada del usuario. Intenté usar onKeyUp, pero esperó 1 segundo después de la primera pulsación de tecla.

¿Alguien sabe cómo sería esto posible?

Answer 1

Otro enfoque similar, sin globales:

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);" /> 

Puede este fragmento here.

Answer 2

No importa, encontré la manera de hacerlo. Llamo a una función en cada onkeyup() que incrementa un contador y luego espera 1 segundo. Después de la 1 segundo transcurrido, es disminuir el contador y comprobar si es igual a 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

Puede utilizar un evento keyDown (o keyUp) que establece una función a ejecutar en 1 segundo y si el usuario escribe otro clave dentro de ese segundo, puede borrar el tiempo de espera y establecer uno nuevo.

E.g.

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

Simplemente modifique su entrada html y agregue esa primera línea a sus funciones existentes para que no tenga que volver a codificar nada de lo que tiene. No afectará a ningún código de llamada funciones, ya sea, ya que si no se establece onkeypress continuación mykeypress siempre habrá < 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

Hay algunos simples plugin que he hecho que hace que exacly. Requiere mucho menos código que algunas soluciones propuestas y es muy ligero (~ 0,6kb)

Primero crea el objeto Bid que puede ser bumped en cualquier momento. Cada bump retrasará la activación de Puja para la próxima cantidad de tiempo dada.

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 

Cuando Bid objeto está listo, tenemos que bump de alguna manera. Vamos a adjuntar golpes a keyupevent.

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

---

Lo que sucede aquí es:

usuario Cada vez que pulsa la tecla, la oferta es 'retrasa' (golpeado) para los próximos 200 ms. Si pasan 200 ms sin que se repita el mensaje, se activará la devolución de llamada.

Además, usted tiene 2 funciones adicionales para detener la oferta (si se pulsa ESC o usuario hace clic fuera de la entrada, por ejemplo) y para el acabado y el despido inmediato de devolución de llamada (por ejemplo, cuando el usuario pulsa la tecla enter):

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