perché il ciclo setInterval() va più veloce ogni volta?

Question

Sto costruendo un cursore personalizzato su Javascript, e voglio che ogni volta che l'utente fa clic su un div del cursore, il cursore dovrebbe fermarsi per X secondi.

Il mio codice è:

$(document).ready(function() { 
    var ciclo; 
    var index_slide = 1; 

    function startSlidercicle() { 
     ciclo = setInterval(function() { 
      // Slider code goes here 
     }, 3000); 
    } 

    //Here I start the slider animation 
    startSlidercicle(); 

    //When the user clicks on a div called 'slide', stop the cycle and start again the animation cycle 
    $('.slide').on('click', function() { 
     clearInterval(ciclo); 
     setTimeout(startSlidercicle(), 3000); 
    }); 
}); 

Ma il problema è che ogni volta che clicco e fermo il cursore, il ciclo si avvia sempre più velocemente. Come posso ripararlo?

Answer 1

Invece di:

clearInterval(ciclo); 
setTimeout(startSlidercicle(), 3000); 

o:

clearInterval(ciclo); 
setTimeout(startSlidercicle, 3000); 

ho cambiato il codice per essere:

clearInterval(ciclo); 
startSlidercicle(); 

Ed ora il cursore semplicemente funziona bene. Penso che, nelle prime due proposte, ogni volta che clicco sul div, viene creata una nuova funzione, "sovrapposta" al ciclo esistente e, quindi, sembra che il cursore acceleri, ma è solo un ciclo che ricomincia un altro.

Answer 2

è necessario modificare questo:

clearInterval(ciclo); 
setTimeout(startSlidercicle(), 3000); 

a questo:

clearInterval(ciclo); 
setTimeout(startSlidercicle, 3000); 

Nel codice esistente, che si sta chiamando startSlidercirle immediatamente e non è in attesa fino a quando i setTimeout() incendi perché si ha la () dopo il nome della funzione. Ciò significa eseguirlo immediatamente e passare il risultato dell'esecuzione a setTimeout(). Si desidera semplicemente passare il riferimento alla funzione setTimeout() che viene eseguita semplicemente dopo avere il nome della funzione senza () dopo di esso. Questo è un errore comune.