dlaczego cykl setInterval() staje się szybszy za każdym razem?

Question

Buduję niestandardowy suwak w JavaScript i chcę, aby za każdym razem, gdy użytkownik kliknie div suwaka, suwak powinien zatrzymać się na X sekund.

Mój kod to:

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

Ale problemem jest to, że za każdym razem kliknij i zatrzymać suwak, cykl zaczyna się coraz szybciej. Jak mogę to naprawić?

Answer 1

Zamiast:

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

lub:

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

Zmieniłem kod będzie:

clearInterval(ciclo); 
startSlidercicle(); 

A teraz suwak prostu działa dobrze. Myślę, że w pierwszych dwóch propozycjach za każdym razem, gdy klikam div, tworzona jest nowa funkcja, "nakładająca się" na istniejący cykl, a zatem wygląda na to, że suwak przyspiesza, ale jest to tylko jeden cykl zaczynający się od inne.

Answer 2

Trzeba to zmienić:

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

do tego:

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

W istniejącego kodu, do której dzwonisz startSlidercirle natychmiast i nie czeka aż setTimeout() pożarów bo masz () po nazwie funkcji. Oznacza to, że należy go natychmiast wykonać i przekazać wynik wykonania tego do setTimeout(). Chcesz po prostu przekazać odwołanie do funkcji do setTimeout(), które odbywa się po prostu o nazwie funkcji bez () po nim. To powszechny błąd.