Réinitialiser setinterval sur cliquez

Question

J'ai écrit ce carrousel simple. En ce moment j'utilise setInterval pour exécuter ma fonction nextSlide à certains intervalles. Je souhaite différer l'exécution de la minuterie lorsqu'un utilisateur clique sur les liens de navigation pendant un certain temps.

Check it out ici http://jsbin.com/uzixi3/3/edit

Tous les commentaires sur la façon dont le reste est écrit serait bon aussi.

Answer 1

Vous pourriez faire quelque chose comme ceci: http://jsbin.com/uzixi3/5/edit

La partie d'intervalle est ici:

var int = setInterval($.fn.nextSlide, 3000); 
$("#slideNavigation a").click(function() { 
    clearInterval(int); 
    setTimeout(function() { 
    setInterval($.fn.nextSlide, 3000); 
    }, 10000); 
}); 

J'ai fait quelques autres tweaks aussi bien que, pour Par exemple, vous pouvez utiliser une instruction switch pour rendre .nextSlide() beaucoup plus lisible et moins cher.

dans l'ensemble, il n'y a aucune raison de faire ces fonctions comme les méthodes d'extension sur jjquery lui-même, car ils n'interagissent pas avec des objets, ils peuvent juste être des méthodes scope à la fermeture comme ceci: http://jsbin.com/uzixi3/6/edit

Si les méthodes étaient en cours d'exécution sur $('#slideContainer'), par exemple $('#slideContainer').nextSlide() et à l'intérieur de vos méthodes que vous avez utilisé this.animate() et this.css() cela pourrait faire un peu plus de sens, juste quelques réflexions qui peuvent vous aider à devenir plus flexible au fur et à mesure.

Answer 2

Vous pouvez enregistrer la valeur de retour de setInterval dans une variable pour y faire référence plus tard - de cette façon, vous pouvez l'annuler si nécessaire, ou le redémarrer. Pour plus de détails, voir .

Les bases sont:

intervalID = setInterval(flashText, 1000); 

//do something... 

clearInterval(intervalID); 

Answer 3

Le code ci-dessus a vraiment aidé. Merci Nick. J'ai fait quelques ajustements mineurs de sorte qu'une fois que vous avez cliqué sur la fonction: le temporisateur s'arrêterait, la fonction s'exécuterait, puis le temporisateur commencerait et reprendrait des intervalles réguliers.

assurez-vous de réaffecter le var int au nouveau interval que vous créez dans le click function.

var int = setInterval(change_slide, 5000); 
$("#div").click(function() { 
    console.log('clicked'); 
    clearInterval(int); 
    setTimeout(function() { 
    int = setInterval(change_slide, 5000); 
    }); 
}); 

Answer 4

Voir:

var IntID = setTimer(); 

function setTimer(){ 
    i = setInterval(startSlider, 4000); 
    return i; 
} 

function stopSlider() { 
    clearInterval(IntID); 
} 

//Restart Timer 

// Option 1 make a restartSlider function and call it 
$("#button").click(restartSlider); 
function restartSlider(){ 
    IntID = setTimer(); 
} 

//Option 2 create an anonymous function only for that click event. 
$("#button").click(function(){ 
    IntID = setTimer(); 
});