Restablecer setinterval al hacer clic

Question

He escrito este sencillo Carrusel. En este momento estoy usando setInterval para ejecutar mi función nextSlide en ciertos intervalos. Quiero aplazar la ejecución del temporizador cuando un usuario hace clic en los enlaces de navegación durante un cierto período de tiempo.

Échale un vistazo aquí http://jsbin.com/uzixi3/3/edit

Cualquier comentario sobre cómo el resto está escrito sería bueno también.

Answer 1

se podría hacer algo como esto: http://jsbin.com/uzixi3/5/edit

La parte del intervalo es aquí:

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

he hecho algunos otros ajustes, así, sin embargo, para Por ejemplo, puede usar una declaración switch para hacer que .nextSlide() sea mucho más legible y económico.

general, sin embargo, no hay razón para que estas funciones como métodos de extensión en jjquery en sí, ya que no interactúan con los objetos, que sólo pueden ser métodos como alcance el cierre de esta manera: http://jsbin.com/uzixi3/6/edit

Si los métodos eran en realidad se ejecuta en $('#slideContainer'), por ejemplo $('#slideContainer').nextSlide() y dentro de sus métodos que usó this.animate() y this.css() podría tener más sentido, solo algunos pensamientos que pueden ayudarle a ser más flexible sobre la marcha.

Answer 2

Puede guardar el valor de retorno de setInterval en una variable para consultarlo más adelante, de esa forma puede cancelarlo si lo necesita o reiniciarlo.

Consulte para obtener más información.

Los fundamentos son:

intervalID = setInterval(flashText, 1000); 

//do something... 

clearInterval(intervalID); 

Answer 3

El código anterior realmente ayudó. Gracias Nick. Hice algunos ajustes menores para que una vez que hagas clic en la función: el cronómetro se detenga, la función se ejecute, y luego el temporizador inicie y reanude los intervalos regulares.

asegúrese de volver a asignar el var int al nuevo interval que cree dentro del 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

Ver:

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(); 
});