problèmes de setTimeout / clearTimeout

Question

J'essaie de faire en sorte qu'une page se rende à la page de départ après, par exemple, 10 secondes d'inactivité (l'utilisateur ne clique pas). J'utilise jQuery pour le reste mais le set/clear dans ma fonction de test est du pur javascript.

Dans ma frustration, je me suis retrouvé avec quelque chose comme cette fonction que j'espérais pouvoir appeler à chaque clic sur la page. Le minuteur démarre bien, mais n'est pas remis à zéro lors d'un clic. Si la fonction est appelée 5 fois dans les 10 premières secondes, alors 5 alertes apparaîtront... pas de clearTimeout...

function endAndStartTimer() {
    window.clearTimeout(timer);
    var timer;
    //var millisecBeforeRedirect = 10000; 
    timer = window.setTimeout(function(){alert('Hello!');},10000); 
}

Quelqu'un a t-il quelques lignes de code qui feront l'affaire ? - Sur n'importe quel clic, arrêter, réinitialiser et démarrer le minuteur. - Lorsque la minuterie atteint par exemple 10 secondes, faites quelque chose.

Answer 1

Vous devez déclarer timer à l'extérieur de la fonction. Sinon, vous obtenez une toute nouvelle variable à chaque invocation de la fonction.

var timer;
function endAndStartTimer() {
  window.clearTimeout(timer);
  //var millisecBeforeRedirect = 10000; 
  timer = window.setTimeout(function(){alert('Hello!');},10000); 
}

Answer 2

Le problème est que le timer est locale, et sa valeur est perdue après chaque appel de fonction.

Vous devez la conserver, vous pouvez la placer en dehors de la fonction, ou si vous ne voulez pas exposer la variable comme globale, vous pouvez la stocker dans un fichier fermeture par exemple :

var endAndStartTimer = (function () {
  var timer; // variable persisted here
  return function () {
    window.clearTimeout(timer);
    //var millisecBeforeRedirect = 10000; 
    timer = window.setTimeout(function(){alert('Hello!');},10000); 
  };
})();

Answer 3

C'est parce que timer est une variable locale de votre fonction.

Essayez de le créer en dehors de la fonction.

Answer 4

Un moyen d'utiliser ceci dans react :

class Timeout extends Component {
  constructor(props){
    super(props)

    this.state = {
      timeout: null
    }

  }

  userTimeout(){
    const { timeout } = this.state;
    clearTimeout(timeout);
    this.setState({
      timeout: setTimeout(() => {this.callAPI()}, 250)
    })

  }
}

Utile si vous souhaitez n'appeler une API que lorsque l'utilisateur a cessé de taper, par exemple. La fonction userTimeout pourrait être liée à une entrée via onKeyUp.

Answer 5

Je ne sais pas si cela enfreint une règle de codage des bonnes pratiques, mais j'ai l'habitude d'en sortir avec celle-ci :

if(typeof __t == 'undefined')
        __t = 0;
clearTimeout(__t);
__t = setTimeout(callback, 1000);

Cela évite de devoir déclarer le minuteur en dehors de la fonction.

EDIT : cela ne permet pas non plus de déclarer une nouvelle variable à chaque invocation, mais de toujours recycler la même.

J'espère que cela vous aidera.