6

我正在 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);
    });
});

但问题是每次单击并停止滑块时，循环开始的速度越来越快。我该如何解决？

4

2 回答 2

5

代替：

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

或者：

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

我将代码更改为：

clearInterval(ciclo);
startSlidercicle();

现在滑块工作正常。我认为，在前两个提案中，每次我点击 div 时，都会创建一个新函数，与现有循环“重叠”，因此，看起来滑块加速了，但它只是一个循环重新开始其他。

于 2013-08-22T23:21:30.293 回答
2

你需要改变这个：

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

对此：

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

在您现有的代码中，您startSlidercirle立即调用并且它不会等到setTimeout()火灾，因为您()在函数名称之后有。这意味着立即执行它并将执行结果传递给setTimeout(). 您只想传递函数引用，setTimeout()只需在函数名称后面加上 no 即可()。这是一个常见的错误。

于 2013-08-22T22:59:59.220 回答