javascript - 当我点击箭头/导航时，自定义 jQuery/JavaScript slider 出现错误

Question

我正在努力创建我自己的响应式 JavaScript/jQuery slider 。在大多数情况下，它似乎工作得非常好，但是，当我单击箭头或导航圆圈时，超时/动画似乎出现错误。这并不一致。单击箭头/导航圆圈时，它应该重置超时并转到相应的幻灯片。

例如，如果您在到达最后一张幻灯片时单击导航圆圈，它会快速返回到第一张幻灯片，而不会出现 5000 次暂停。

这是所有代码的 fiddle :http://jsfiddle.net/23712cwb/2/

为什么时间这么错乱？我如何解决它？正如您所看到的，我将 clearTimeout($timeout); 添加到 nextSlide() 函数的顶部，但这并没有完全解决它，我不确定这一点才是解决问题的正确方法。然而，在我添加这行代码之前，它的错误更多。

此外，如果有人有任何提示可以给我或关于如何使其变得更好的建议，那就太棒了。我对 jQuery 插件不是很熟悉，所以我只是在这里即兴发挥。

Answer 1

我明白了。此代码导致了该问题:

    $('.slider .slides li .caption, .slider .slide-arrows li, .slider .slide-nav').mouseout(function () {
        $timeout = setTimeout(function () { nextSlide('right', $slides, $height, $caption_speed, $slide_speed, 'null'); }, $slide_speed);
    });

因此，每次我将鼠标从箭头、导航或标题上移开时，它都会加倍执行 nextSlide 函数。

我删除了该代码，现在一切都顺利了。