Ao programar uma caixa de pesquisa, enfrentei dois problemas:
- 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.
- 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”> </a>