Exécuter une fonction avec délai de glissement

Question

Dites que j'ai une page html qui reçoit une liste de certains éléments. Il y a une zone de texte qui permet à l'utilisateur de filtrer les éléments. Pour mettre à jour les éléments affichés, j'ai besoin de faire un appel ajax pour récupérer les éléments qui correspondent à la valeur du filtre. Je souhaite que l'appel ajax soit exécuté deux secondes après la saisie de la dernière lettre dans la zone de texte du filtre. Je sais environ settimeout mais je veux que le délai de deux secondes soit "glissant", ce qui signifie que si dans les deux secondes la période de délai l'utilisateur tape une autre lettre, alors je veux réinitialiser le retard. Comment pourrais-je m'y prendre?

Merci d'avance.

Answer 1

setTimeout retourne une poignée (un certain nombre) que vous pouvez utiliser pour annuler la minuterie via clearTimeout, de sorte que votre gestionnaire pour l'événement KeyDown peut le faire:

var timerHandle = 0; 
function handler() { 
    // Clear the previous timer if it hasn't already happened 
    if (timerHandle != 0) { 
     clearTimeout(timerHandle); 
    } 

    // Call `tick` in 2 seconds or so 
    timerHandle = setTimeout(tick, 2000); 
} 
function tick() { 
    // The timer has gone off, clear the handle 
    timerHandle = 0; 
} 

Notez que nous timerHandle lorsque la compensation la fonction de minuterie est exécutée; Dans le cas contraire, le prochain raccourci nous incitera à annuler une temporisation qui n'existe plus. Je n'ai jamais rencontré un navigateur qui se plaint, mais je n'ai jamais poussé ma chance, non plus ...