2010-08-17 39 views
7

Ho scritto questo semplice carosello. Al momento sto usando setInterval per eseguire la mia funzione nextSlide a determinati intervalli. Voglio ritardare l'esecuzione del timer quando un utente fa clic sui collegamenti di navigazione per un certo periodo di tempo.Reset setvalval on click

verificarlo qui http://jsbin.com/uzixi3/3/edit

Qualsiasi feedback su come il resto è scritto sarebbe troppo bello.

+0

Un ultimo, non passa una stringa a 'setInterval()' o 'setTimeout()', passare un riferimento funzione diretta come nel mio revisione, è' Eviterò molti mal di testa in questo modo, in più è più efficiente da avviare :) –

risposta

12

Si potrebbe fare qualcosa di simile: http://jsbin.com/uzixi3/5/edit

La parte intervallo è qui:

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

ho fatto alcune altre modifiche come bene però, per esempio è possibile utilizzare una dichiarazione switch per rendere .nextSlide() molto più leggibile ed economico.

Nel complesso, però, non c'è motivo di fare queste funzioni come metodi di estensione su jjquery sé dal momento che non interagiscono con gli oggetti, possono essere solo metodi scope alla chiusura in questo modo: http://jsbin.com/uzixi3/6/edit

Se i metodi sono stati in realtà in esecuzione su $('#slideContainer'), ad es $('#slideContainer').nextSlide() e all'interno dei tuoi metodi hai usato this.animate() e this.css() potrebbe essere un po 'più sensato, solo alcuni pensieri che potrebbero aiutarti a diventare più flessibile man mano che vai.

+0

Cheers Nick. Grazie per il consiglio, più utile – Reynish

+0

@Reynish - welcome :) –

+0

hihi, ha avuto molto da divertirsi giocando con i cursori per rispondere in tempo ;-) –

5

È possibile salvare il valore restituito di setInterval in una variabile per fare riferimento ad esso in un secondo momento, in questo modo è possibile annullarlo se necessario oppure riavviarlo.

Vedere per ulteriori dettagli.

Le basi sono:

intervalID = setInterval(flashText, 1000); 

//do something... 

clearInterval(intervalID); 
+0

Grazie per il tuo aiuto – Reynish

0

Il codice di cui sopra ha davvero aiutato. Grazie Nick. Ho apportato alcune piccole modifiche in modo che, una volta selezionata la funzione: il timer si fermasse, la funzione si sarebbe eseguita, quindi il timer inizia e riprende gli intervalli regolari.

assicuratevi di riassegnare lo var int al nuovo interval creato all'interno dello click function.

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

See:

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