Attendere la funzione fino a quando l'utente non smette di digitare

Question

Ho utenti che fanno una chiamata ajax durante la digitazione. Il problema è che effettua la chiamata per ogni lettera viene digitato, così ho impostato il timeout come questo:

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

setTimeout(function(){ 

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

}, 400); 

}); 

Non attendere 400ms, ma poi esegue per ogni keyup. Come posso cambiarlo per far sì che la chiamata ajax sia "una sola volta" a circa 400 ms dall'ultima lettera digitata?

(io ho usato 'ritardo' in passato, ma che non funziona affatto con il mio script ...)

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); 
}); 

è meglio spostare la funzione per una funzione denominata e chiamarlo più volte, perche' altrimenti si sta creando un'altra funzione lambda su ogni keyup che è inutile e relativamente costoso

Answer 2

È necessario azzerare il timer ogni volta che si preme una nuova chiave, per esempio

(function() { 
    var timer = null; 

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

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

L'espressione funzione viene utilizzato per garantire che la portata della variabile timer è limitata a queste due funzioni che ne hanno bisogno.

Answer 3

Vorrei pensare che delay() utilizzare di nuovo in questo contesto finché sei ok con l'aggiunta di un nuovo "qualcosa" temporaneo al mix. Funzionerebbe per te?

$(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

ho trovato il seguente più facile da implementare:

$(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); 
}); 

Memorizzando la stringa corrente si è in grado di vedere che l'utente ha smesso di scrivere. Quindi puoi tranquillamente chiamare la tua funzione per fare ciò che deve accadere in qualsiasi momento.