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

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

Answer 1

而不是：

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

或：

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

我将代码更改为：

clearInterval(ciclo);
startSlidercicle();

现在滑块工作正常。我认为，在前两个提案中，每次点击div时，都会创建一个新功能，＆＃34;重叠＆＃34;在现有的循环中，因此看起来滑块加速，但它只是一个循环从另一个循环开始。

Answer 2

你需要改变这个：

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

到此：

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

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

为什么setInterval（）循环每次都变得更快？

2 个答案: