Espere la función hasta que el usuario deje de escribir

Question

Tengo usuarios que hacen una llamada ajax mientras escriben. El problema es que hace la llamada para cada letra está tecleando, por lo que poner el tiempo de la siguiente manera:

$(input).live('keyup', function(e){ 

setTimeout(function(){ 

var xx = $(input).val(); 
doSearch(xx); 

}, 400); 

}); 

No espere a 400 ms, pero luego ejecuta para cada keyup. ¿Cómo puedo cambiar esto para hacer que la llamada ajax solo 'una vez' alrededor de 400ms después de la última letra escrita?

(he usado 'retraso' en el pasado, pero eso no funciona en absoluto con mi guión ...)

Answer 1

timer = 0; 
function mySearch(){ 
    var xx = $(input).val(); 
    doSearch(xx); 
} 
$(input).live('keyup', function(e){ 
    if (timer) { 
     clearTimeout(timer); 
    } 
    timer = setTimeout(mySearch, 400); 
}); 

que es mejor para mover su función a una función llamada y llamarlo varias veces, porque de lo contrario va a crear otra función lambda en cada keyup que es innecesario y relativamente caro

Answer 2

Es necesario restablecer el temporizador cada vez que se pulsa una nueva clave, por ejemplo,

(function() { 
    var timer = null; 

    $(input).live('keyup', function(e) { 
     timer = setTimeout(..., 400); 
    }); 

    $(input).live('keydown', function(e) { 
     clearTimeout(timer); 
    }); 
)(); 

La expresión función se utiliza para asegurar que el alcance de la variable de timer se limita a esas dos funciones que lo necesitan.

Answer 3

Me gustaría pensar que usted podría usar delay() nuevamente en este contexto, siempre y cuando esté bien con agregar un nuevo 'algo' temporal a la mezcla. Que este trabajo para usted?

$(input).live('keyup', function(e) { 
    if (!$(input).hasClass("outRunningAJob")) { 
     var xx = $(input).val(); 
     $(input).addClass("outRunningAJob"); 
     doSearch(xx); 
     $(input).delay(400).queue(function() { 
      $(this).removeClass("outRunningAJob"); 
      $(this).dequeue(); 
     }); 
    } 
}); 

Answer 4

encontré la siguiente más fácil de implementar:

$(input).on('keyup', function() { 
    delay(function() { 
     if (input).val() !== '' && $(input).val() !== $(input).attr('searchString')) { 
      // make the AJAX call at this time 
      // Store the value sent so we can compare when JSON returns 
      $(input).attr('searchString', $(input).val()); 

      namepicker2_Search_Prep(input); 
     } 
    }, 500); 
}); 

Al almacenar la cadena actual que son capaces de ver que el usuario ha dejado de escribir. Entonces puede llamar a su función de forma segura para hacer lo que sea que el procesamiento deba suceder.