Tengo un campo de texto en el que respondo al escribir comprobando la base de datos para ver el número de coincidencias, pero no quiero aporrear la base de datos con demasiadas consultas sin ningún motivo si el usuario escribe varios caracteres rápidamente.
Al buscar en la web, el consejo parece ser envolverlo todo en setTimeout() , pero aparentemente no entiendo cómo usarlo correctamente. Aquí está mi código en este momento:
$(".qs-text").keyup(function() { if ($(this).val().length > 2) { setTimeout(function() { $.get("ajax_request.php?req=Quicksearch&qs=" + $(".qs-text").val(), function(data) { $('.qs-hits').text(data); }); }, 500); } else { $('.qs-hits').text('-'); } });Espera 500 ms y, al final del período de tiempo de espera, utiliza el estado final del campo en la solicitud: bueno.
Sin embargo, envía varias solicitudes idénticas (una para cada carácter que escribí) en lugar de solo una. Eso anula el propósito de tener el tiempo de espera en primer lugar. Casi puedo ver por qué el código haría eso, ya que el evento keyup se activa cada vez, pero no tengo idea de cómo resolverlo. Hay otras preguntas cuyos títulos suenan como lo que estoy preguntando, pero cada una de las que he leído es tan diferente que no puedo aplicar ninguna de ellas a mi caso.
Necesita cancelar el tiempo de espera cuando crea uno nuevo.
var timeout = null; $(".qs-text").keyup(function() { if(timeout != null) clearTimeout(timeout); if ($(this).val().length > 2) { timeout = setTimeout(function() { $.get("ajax_request.php?req=Quicksearch&qs="+$(".qs-text").val(), function(data) { $('.qs-hits').text(data); }); },500); } else { $('.qs-hits').text('-'); } });Por lo general, almacenamos el tiempo de espera en una variable y luego lo borramos condicionalmente cuando llamamos a uno nuevo. Sin embargo, para aplicaciones web grandes, sugiero usar sockets web para tales llamadas posteriores para una experiencia en tiempo real
var timer; $(".qs-text").keyup(function() { if ($(this).val().length > 2) { clearTimeout(timer); timer = setTimeout(function() { $.get("ajax_request.php?req=Quicksearch&qs=" + $(".qs-text").val(), function(data) { $('.qs-hits').text(data); }); }, 500); } else { $('.qs-hits').text('-'); } });Recomendaría usar algo como lodash para eliminar rebotes, para que pueda hacer algo como esto
$(".qs-text").keyup(function() { _.debounce(()=> { $.get("ajax_request.php?req=Quicksearch&qs="+$(".qs-text").val(), function(data) { $('.qs-hits').text(data); }) }, 500) });para más información, https://lodash.com/docs/4.17.15#debounce