AJAX: Retraso en la búsqueda al escribir en el campo de formulario

Question

En mi sitio web utilizo JavaScript/AJAX para hacer la búsqueda y mostrar los resultados mientras el usuario todavía está escribiendo.

HTML (cuerpo):

<form action="" method="post" accept-charset="utf-8"> 
    <p><input type="text" name="q" id="q" value="" onkeyup="doSearch(this.value)" /></p> 
</form> 

JavaScript (cabecera):

function doSearch(text) { 
    // do the ajax stuff here 
    // call getResults.php?search=[text] 
} 

pero esto podría causar una gran cantidad de solicitudes que llegan al servidor.

Por lo tanto quiero para aliviar el servidor mediante la creación de un retraso:

Cada vez que se dispara el evento onkeyup, la función doSearch() debe mostrar un "gráfico ajax carga" y espere 2 segundos. Solo si el evento NO se dispara nuevamente durante estos 2 segundos, los resultados se deben obtener del archivo PHP.

¿Hay alguna manera de hacer esto? ¿Usted me podría ayudar por favor? ¡Gracias por adelantado!

Answer 1

var delayTimer; 
function doSearch(text) { 
    clearTimeout(delayTimer); 
    delayTimer = setTimeout(function() { 
     // Do the ajax stuff 
    }, 1000); // Will do the ajax stuff after 1000 ms, or 1 s 
} 

Answer 2

Simplemente configuración de la invocación tardía con setTimeout(), luego retire de nuevo en cada caso con clearTimeout()

HTML

<form action="" method="post" accept-charset="utf-8"> 
    <p><input type="text" name="q" id="q" value="" onkeyup="doDelayedSearch(this.value)" /></p> 
</form> 

Javascript

var timeout = null; 

function doDelayedSearch(val) { 
    if (timeout) { 
    clearTimeout(timeout); 
    } 
    timeout = setTimeout(function() { 
    doSearch(val); //this is your existing function 
    }, 2000); 
} 

Answer 3

Para este tipo de cosas que tienden a utilizar una función poco astuta 'estrangulamiento' creado por Remy de Sharp:

http://remysharp.com/2010/07/21/throttling-function-calls/