2010-12-01 50 views
7

Je travaille sur des onglets créés avec jQuery. Tout fonctionne à l'exception d'un problème - J'ai fait un setInterval qui exécute une fonction qui effectue un trigger ("clic") de sorte qu'il passe à l'onglet suivant après 5000 milisecondes. Il passe très bien à travers chaque onglet, le problème est que si l'utilisateur clique manuellement sur un onglet, le timer de setInterval ne redémarre pas à 0. Par exemple si un utilisateur devait démarrer sur tab1 à 0 miliseconde et clique sur tab2 à 2000 miliseconds, le setInterval ne revient pas à 0, il commencerait à 2000 et s'exécuterait à 5000 milisecondes et deviendrait ensuite tab3. Je comprends pourquoi cela se passe, je me demande juste s'il y avait un moyen de redémarrer le timing setInterval sans avoir à faire un clearInterval() et en créant un tout nouveau setInterval(). Toute idée serait appréciée.Redémarrage d'un setInterval() dans Javascript/jQuery (sans clearInterval)

Mise à jour

Merci pour les réponses - La raison pour laquelle je tentais d'éviter d'utiliser clearInterval parce que j'avais des problèmes de la façon d'écrire le code d'une manière où le clearInterval arrêterait complètement le setInterval. Le code est configuré pour suivre chaque fois qu'un utilisateur a cliqué sur un onglet. Le problème est que la fonction de changement automatique utilise trigger ('clic'), donc elle exécute la fonction clearInterval que j'ai écrite aussi quand les onglets changent automatiquement. Il semble fonctionner assez bien seul, mais une fois que l'utilisateur commence à cliquer sur les onglets, setInterval se comporte de manière inhabituelle et change de tabulation de façon imprévisible. Je suspecte que ce qui se passe est que plusieurs setIntervals s'exécutent en même temps ... Voici le code (Si vous ne l'avez pas déjà deviné, je suis assez nouveau sur javascript/jquery). J'ai commenté des parties de façon à ce qu'elles soient fonctionnelles, mais elles ne fonctionnent toujours pas comme prévu (à partir du premier message).

// auto change tabs 
      if(options.interval) { 

       function timerCom() { 
        if(!$(".controller").hasClass('paused')) { 
         var i = $(".tab-current > a").attr("rel"); 
         //alert(i); 
         if(i == 3) {i = 0}; 
         $container 
          .find('a') 
          .eq(i) 
          .trigger('click'); 
        }  
       } 

       //$("#promo-items > li > a").click(function() { 
        //var timer; 
        //if(timer != null) {clearInterval(timer);} 
        timer = setInterval(timerCom, options.interval); 

       //}); 

      } 
+0

Bienvenue sur SO!S'il vous plaît, éditez votre question si vous avez besoin de fournir des informations supplémentaires. Utilisez des commentaires pour des questions spécifiques sur les réponses. SO n'est pas un forum, le champ de réponse est strictement réservé aux réponses à la question. –

Répondre

8

Non, il n'y a aucun moyen de redémarrer une minuterie fixée par setInterval sans effacer la minuterie.

3

Vous ne pouvez pas vraiment modifier les intervalles ou les délais, mais seulement les effacer. Cela dit, il devrait être simple de créer une fonction qui efface l'intervalle, puis démarre immédiatement une nouvelle, mais identique, avec une nouvelle valeur de temps.

var intervalID; 
var resetTimer = function() { 
    if (intervalID) { clearInterval(intervalID) }; 
    intervalID = setInterval(function() { 
    console.log('doing stuff!'); 
    }, 5000); 
}; 
+5

cette façon d'utiliser des accolades rend le code presque illisible: P. Les accolades devraient être sur leurs propres lignes –

+2

Je ne m'intéresse pas au débat, mais en fait, la norme de codage de Google dit: «En raison de l'insertion implicite du point-virgule, commencez toujours vos accolades sur la même ligne que celle qu'ils ouvrent. " http://google-styleguide.googlecode.com/svn/trunk/javascriptguide.xml – DaveWalley

1
timer = setInterval(function() { 
    timerCom(); 
}, options.interval); 
0

Je sais ce post est vieux puits plus de 2 ans, mais je suis tombé sur un problème similaire à l'instant, et je trouve une solution. J'écrivais un défilement d'image qui passait automatiquement à l'image suivante après un certain temps, et chaque fois que je cliquais sur les boutons de navigation, les transitions se déplaçaient à deux temps.

Voici ma solution:

Faire la variable d'intervalle (timer dans votre cas) un peu global.

, c'est-à-dire dans la section options (en supposant qu'il ait été défini précédemment, puis attribué ultérieurement), ajoutez une variable null timer. Puis, appelez clearInterval deux fois lorsque vous gérez l'événement click.

$("#promo-items > li > a").click(function() { 

if(options.timer != null) { 
clearInterval(options.timer); 
clearInterval(options.timer); 
} 

options.timer = setInterval(timerCom, options.interval); 

}); 

Travaillé comme un charme pour moi.

Encore une fois, désolé si c'est wayyyy trop tard.