Ajax: Gestire una sequenza di richieste

In un modulo di ricerca dinamica di Prestashop si presenta questo problema: l’elenco dei risultati possibili appare appena si inserisce un carattere nel campo di ricerca, se però la richiesta riguarda una parola specifica, ad esempio “lampada”, appare per un secondo la lista corretta, che viene però immediatamente sostituita da una lista più grezza, quella prodotta per la ricerca per “l”.

$(document).ready(function() {
 $( "#ajax_search" ).keyup(function() { 

 var search_key = $( "#ajax_search" ).val(); 

 $.ajax({
 type: 'GET',
 url: baseDir + 'modules/jmsajaxsearch/ajax_search.php',
 headers: { "cache-control": "no-cache" },
 async: true, 
 data: 'search_key=' + search_key,
 success: function(data)
 { 
 $('#search_result').innerHTML = data; 
 }
 }) .done(function( msg ) {
$( "#search_result" ).html(msg);
});

Il problema sta nella sequenza di richieste e nei tempi di risposta alle richieste: il modulo in questione manda una richiesta ogni volta che l’utente inserisce un carattere. Le richieste sono giustamente asincrone ed il browser non si ferma in attesa della risposta: se i tempi di risposta sono lunghi è anche possibile che l’utente riesca ad inserire una o più lettere che generano altre richieste asincrone.

Se non si prendono contromisure, il risultato della ricerca non sarà relativo all’ultima stringa di ricerca inserita, ma a quella la cui risposta arriva per ultima: nel caso specifico, la ricerca per “la” da molti più risultati della ricerca per “lampada” ed i risultati arrivano dopo, occupando l’interfaccia con un elenco che sembra incongruente.

Il problema si risolve considerando valida solo l’ultima richiesta asincrona e facendo abortire la predenti. Il sorgente allora diventa (in rosso sono evidenziate le modifiche rispetto all’originale)

var $ajaxsearchReqn=null;

$(document).ready(function() {
 $( "#ajax_search" ).keyup(function() { 

 var search_key = $( "#ajax_search" ).val(); 
 if($ajaxsearchReqn) $ajaxsearchReqn.abort();
 
 $ajaxsearchReqn=$.ajax({
 type: 'GET',
 url: baseDir + 'modules/jmsajaxsearch/ajax_search.php',
 headers: { "cache-control": "no-cache" },
 async: true, 
 data: 'search_key=' + search_key,
 success: function(data)
 { 
 $('#search_result').innerHTML = data; 
 }
 }) .done(function( msg ) {
$( "#search_result" ).html(msg);
});