Javascript Jquery幻灯片动画表现异常（事件触发、队列中累积）

我试图创建一个非常简单的幻灯片

我希望幻灯片在悬停时暂停，并在用户将鼠标移离幻灯片时继续播放（

#slide_container

）。虽然幻灯片效果很好，悬停（在某种程度上）也很好，但如果我反复在幻灯片上来回滑动鼠标，它会完全弄乱幻灯片，并开始偶尔制作动画（查看下面的小提琴，了解我的意思）

我尝试添加

promise

，以便在设置动画之前完成任何排队的动画，但尽管如此，该行为仍然存在

我该如何着手解决这个问题

这是小提琴：

我的js代码：

$(document).ready(function() {

    //get variables

    var slide_width      = $('.slider_container').width();
    var number_of_slides = $('.slider_container .slide').length;
    var slider_width = slide_width*number_of_slides;

    //set element dimensions
    $('.slide').width(slide_width);
    $('.slider').width(slider_width);

    var i = 0;

    var hover_switch = 0;

    $('.slider_container').hover(function() { 
        //Hover mode on
        hover_switch = 1;
    }, function() {
        //Hover mode off
        hover_switch = 0;
        sliderLoop()
    });

    function animateSlider() {
        $(":animated").promise().done(function() {
            $('.slider').finish().animate({ marginLeft: -(slide_width * i) });
        });
    }

    function sliderLoop() {
        setTimeout(function(){          
            //Only runs if hover mode is off;
            if(i < number_of_slides-1 && !hover_switch) {
                i++;
                animateSlider();
                sliderLoop();
            }
            else if (!hover_switch)
            {
                i = 0;
                animateSlider();
                sliderLoop()
            }
        },4000);


    }

    sliderLoop();


});

$（文档）.ready（函数（）{
//获取变量
var slide_width=$（'.slider_container'）.width（）；
var number_of_slides=$（'.slider_container.slide'）。长度；
变量滑块宽度=滑块宽度*滑块数量；
//设置元素维度
$（'.slide'）.width（slide_width）；
$（'.slider'）.width（slider_width）；
var i=0；
var hover_开关=0；
$（'.slider_container'）。悬停（函数（）{
//悬停模式打开
悬停开关=1；
}，函数（）{
//悬停模式关闭
悬停开关=0；
sliderLoop（）
});
函数animateSlider（）{
$（“：动画”）.promise（）.done（函数（）{
$（'.slider'）.finish（）.animate（{marginLeft:-（slide_width*i）}）；
});
}
函数sliderLoop（）{
setTimeout（函数（）{
//仅在关闭悬停模式时运行；
如果（i<幻灯片数量-1&！悬停开关）{
i++；
animateSlider（）；
sliderLoop（）；
}
否则如果（！悬停开关）
{
i=0；
animateSlider（）；
sliderLoop（）
}
},4000);
}
sliderLoop（）；
});

---

编辑：我也尝试过使用stop而不是

finish（）

，但这并没有解决问题。

因为每次悬停时都会调用滑块循环，即使你来回悬停十次，它会告诉你，并使你做了x次的动作

您可以尝试的是，仅在此时检查滑块循环，并在其即将设置动画时检查是否悬停，并且不要在每次悬停时从调用滑块循环。 另一种方法是在开始制作动画之前，为动画的持续时间设置一个变量，告诉它如果当前正在制作动画，不要调用animateSlider函数 所以添加&！当前为sliderloop函数中的每个if语句设置动画。 不过，该方法会有所帮助，但第一种方法可能会更好，因为它不会比每x毫秒或设置的时间长

---

但一般来说，如果hover_switch=0，您可能不应该调用sliderloop函数，因为每次悬停时，它都会将滑块循环排队

你能更详细地解释你的问题吗？