なぜsetInterval（）サイクルが毎回速くなるのですか？

Question

私はJavascriptでカスタムスライダーを作成しています。ユーザーがスライダーのdivをクリックするたびに、スライダーはX秒間停止する必要があります。

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

しかし、問題は、私は、スライダをクリックして停止することを毎回で、サイクルが速く起動する：

私のコードです。どうすれば修正できますか？これに

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

：あなたはこの変更する必要があり

Answer 1

の代わりに：

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

か：

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

私がするコード変更：

clearInterval(ciclo); 
startSlidercicle(); 

をそして今、スライダーだけで正常に動作します。最初の2つの提案では、divをクリックするたびに、新しい関数が既存のサイクルをオーバーラップして作成されるため、スライダのスピードアップのように見えますが、別の

Answer 2

既存のコードでは

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

は、すぐにstartSlidercirleを呼び出していると、あなたが持っているので、それはsetTimeout()火災になるまで待っていません関数名の後の()。それはすぐにそれを実行し、それを実行した結果をsetTimeout()に渡すことを意味します。関数の名前を()にしただけで、関数参照をsetTimeout()に渡すだけです。これはよくある間違いです。