web-dev-qa-db-fra.com

problèmes setTimeout/clearTimeout

J'essaie de faire une page pour aller à la page d'accueil après par exemple. 10 secondes d'inactivité (l'utilisateur ne clique nulle part). J'utilise jQuery pour le reste mais les fonctions set/clear de ma fonction de test sont purement javascript.

Dans ma frustration, je me suis retrouvé avec quelque chose comme cette fonction que j'espérais pouvoir appeler n'importe quel clic sur la page. La minuterie commence bien, mais n'est pas réinitialisée sur un clic. Si la fonction est appelée 5 fois dans les 10 premières secondes, 5 alertes apparaîtront ... non clearTimeout ...

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

Quelqu'un at-il des lignes de code qui feront l'affaire? - à tout clic, arrêtez, réinitialisez et démarrez le chronomètre . - Lorsque la minuterie sonne, par exemple. 10sec faire quelque chose.

javascriptjquerytimersettimeout
85
Tillebeck

Vous devez déclarer timer outside the function. Sinon, vous obtenez une nouvelle variable à chaque appel de fonction.

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

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

Vous devez la persister, vous pouvez la mettre en dehors de la fonction, ou si vous ne voulez pas exposer la variable en tant que variable globale, vous pouvez la stocker dans un 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); 
  };
})();
44
CMS

En effet, la minuterie est une variable locale de votre fonction.

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

14
arclight

Une façon de l'utiliser en réaction:

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 uniquement appeler une API après que l'utilisateur a par exemple arrêté de taper La fonction userTimeout peut être liée via onKeyUp à une entrée. 

3
zero_cool

Je ne sais pas si cela enfreint une règle de codage de bonne pratique, mais je décris généralement ceci:

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

Cela évite d'avoir à déclarer le minuteur hors fonction.

EDIT: ceci ne déclare pas non plus une nouvelle variable à chaque invocation, mais recycle toujours la même chose.

J'espère que cela t'aides.

2
clamiax

Ça marche bien. C'est un manager que j'ai créé pour gérer des événements en attente. A des événements pour tenir, et pour quand vous laissez aller.

function onUserHold(element, func, hold, clearfunc) {
    //var holdTime = 0;
    var holdTimeout;

    element.addEventListener('mousedown', function(e) {
        holdTimeout = setTimeout(function() {
            func();
            clearTimeout(holdTimeout);
            holdTime = 0;
        }, hold);
        //alert('UU');
    });

    element.addEventListener('mouseup', clearTime);
    element.addEventListener('mouseout', clearTime);

    function clearTime() {
        clearTimeout(holdTimeout);
        holdTime = 0;
        if(clearfunc) {
            clearfunc();
        }
    }
}

Le paramètre element est celui que vous possédez. Le paramètre func se déclenche lorsqu'il est maintenu pendant un nombre de millisecondes spécifié par le paramètre hold. Le paramètre clearfunc est facultatif et s'il est indiqué, il sera déclenché si l'utilisateur le laisse ou quitte l'élément. Vous pouvez également effectuer des contournements pour obtenir les fonctionnalités souhaitées. Prendre plaisir! :)

0
Kino Bacaltos