Pesquisa totalmente otimizada e segura para simultaneidade

Ao programar uma caixa de pesquisa, enfrentei dois problemas:

  1. Como AJAX significa assíncrono e a consulta de “A” leva mais tempo do que “AAA”, certifique-se de que o que é exibido é a consulta mais recente.
  2. Como um cara que digita muito rápido, certifique-se de não enviar X solicitações inúteis.

Acontece que era muito simples de gerenciar, sem plug-ins nem nada!

 Problema de sincronismo

var input = $("#theInputSelector");
input
.change(function() {
var value = input.val();
$
.get("/the/url/to/call", function(data) {
if (value != input.val()) {
return;
}
doStuff
();
});
});

Basta verificar o valor quando o retorno de chamada AJAX é chamado. O resultado mudou em nossa ausência? Esqueça.
Sem fila, todas as consultas são feitas e a correta é mantida.

 Não mande tudo

Você não quer que seu servidor receba:

/search/I
/search/I%20%
/search/I%20%j
/search/I%20%ju
/search/I%20%jus
/search/I%20%just

Bem, novamente, mesma lógica e solução simples:

var input = $("#theInputSelector");
input
.change(function() {
var value = input.val();
setTimeout
(function() {
if (value != input.val()) {
return;
}

$
.get("/the/url/to/call", function(data) {
if (value != input.val()) {
return;
}
doStuff
();
});
}), 200);
});

200ms é uma escolha totalmente arbitrária, cabe a você encontrar um equilíbrio entre obter respostas extremamente rápidas e fazer DDOS no servidor.

Gostei, deixe uma dica no Flattr 🙂
<a href=” http://flattr.com/thing/1375386/manudwarf-on-Coderwall “target=”_blank”> Flattr this</a>