当我单击箭头/导航时，自定义 jQuery/JavaScript 滑块出现问题

Question

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

例如，如果您在导航圈到达最后一张幻灯片时单击它，它会迅速回到第一张幻灯片而没有 5000 次暂停。

这里是所有代码的小提琴：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 函数时加倍。

我删除了那段代码，现在全是肉汁。

Answer 2

实际上，您的代码在 Firefox 上无法运行，因为他对错误的容忍度不如 Chrome。

您应该在 $(document).ready 块之外定义您使用的函数 captionActive 和 nextSlide

你的例子在控制台上给了我这个错误：

 captionActive is not defined

Working fiddle

编辑：我想你应该小心 $timeout 的范围：当你在块 document.ready 和函数中使用它时，你应该使用全局变量并使用 window.$timeout 而不是 $timeout

这可能会解决您的一些问题。