Comment réinitialiser le délai d'expiration dans Javascript / jQuery?

Question

J'ai un champ A dans ma page Web qui, lorsqu'il est modifié par l'utilisateur, appelle un appel d'API (à l'aide de jQuery), qui met à jour le champ B. Après la modification, l'API doit être appelée toutes les 10 secondes pour mettre à jour le champ B à nouveau . Je le fais actuellement en utilisant:

setTimeout(thisFunction, 10000);

Le problème est que ce délai est défini à chaque fois que l'utilisateur modifie le champ A, ce qui, après avoir modifié le champ A plusieurs fois, entraîne le délai plusieurs fois et l'API est appelée plusieurs fois. Cela rend le site Web assez stressant.

Ce que je préférerais faire, c'est définir un nouveau délai d'expiration à chaque fois que le champ est modifié, que ce soit par le champ d'édition utilisateur A, ou par l'intervalle atteignant 10 secondes et interrogeant ainsi l'API. En d'autres termes; le champ doit être mis à jour si le champ B n'a pas été mis à jour pendant 10 secondes ou plus.

Enfin, si l'utilisateur clique ensuite sur le bouton C, l'interrogation doit s'arrêter.

Donc ma question; comment puis-je exécuter une fonction pour mettre à jour le champ B si ce champ B n'a pas été mis à jour pendant 10 secondes ou plus et comment puis-je arrêter l'interrogation quand je le veux (lorsque l'utilisateur clique sur un autre bouton) Tous les conseils sont les bienvenus!

Answer 1

Une minuterie peut être annulée avec clearTimeout, donc:

var timer = null;
if (timer) {
    clearTimeout(timer); //cancel the previous timer.
    timer = null;
}
timer = setTimeout(thisFunction, 10000);

Answer 2

var update;

// something happened

clearTimeout(update);
update = setTimeout(thisFunction, 10000);