setInterval vs setTimeout

Question

作为对此问题的跟进：Hover starts a simple slideshow

如果使用 setInteval 函数，Firefox会表现得很奇怪：

这是JSFiddle和脚本：

$('.fadein img:gt(0)').hide();
$(".fadein").hover(function() {
    timer = setInterval(function() {
        $('.fadein :first-child').fadeOut()
            .next('img').fadeIn()
            .end().appendTo('.fadein');
    }, 1000);
}, function() {
    clearInterval(timer);
});

这在Chrome中运行得非常好，但是当我在Firefox中打开小提琴并将鼠标悬停在图像上一段时间后，事件开始冒泡并且不会在鼠标离开时停止。

修改

有趣的故事 - 我更改了一些参数，但它适用于Firefox，但不适用于Chrome。 我用 setTimeout 更改了 setInterval 功能。见JSFiddle：

$('.fadein img:gt(0)').hide();
$('.fadein').mouseenter(function(){
    timer = setTimeout(function(){
        $('.fadein :first-child').fadeOut().next('img').fadeIn()
        .end().appendTo('.fadein');
    }, 1000);
}) .mouseleave(function() {
    clearTimeout(timer);
});

所以底线是 - 它仍然无法正常工作。

Answer 1

您可能希望在设置之前查看计时器是否存在。

$(".fadein").hover(function(){
    if (timer) { clearInterval(timer); }
    timer = setInterval(function(){