离开页面几分钟后 jQuery 多幻灯片效果错误

Question

我的自定义滑块脚本存在错误。当我在页面上时，一切都很顺利，但是当我打开另一个选项卡并浏览一分钟左右，然后返回到我的页面时，我的脚本变得疯狂......脚本非常简单。

这是 Jsfiddle - 滑块中没有图像，这就是为什么它看起来不太好看应该..

function show12(evt){
$('#number_1').unbind();
$('#number_2').unbind();
// First slide
$('#number_1').css({
    position: 'absolute',
    top: '9px',
    left: '10px',
}).effect('slide', {
    direction: 'left',
    mode: 'show'
}, 'slow');

$('#slide_1').css({
    position: 'absolute',
    top: '9px',
    left: '47px',
}).effect('slide', {
    direction: 'left',
    mode: 'show'
}, 'slow');

// Second slide
$('#number_2').css({
    position: 'absolute',
    top: '9px',
    left: '445px',
}).effect('slide', {
    direction: 'left',
    mode: 'show'
}, 'slow');

$('#slide_2').css({
    position: 'absolute',
    top: '9px',
    left: '481px',
}).effect('slide', {
    direction: 'left',
    mode: 'show'
}, 'slow');

// Third slide  
$('#number_3').css({
    position: 'absolute',
    top: '9px',
    left: '879px'
}).effect('slide', {
    direction: 'left',
    mode: 'show'
}, 'slow');

$('#slide_3').css({
    display: 'none'
});

// Forth slide  
$('#number_4').css({
    position: 'absolute',
    top: '9px',
    left: '917px'
}).effect('slide', {
    direction: 'left',
    mode: 'show'
}, 'slow');

$('#slide_4').css({
    display: 'none'
});

$('#number_1, #number_2').hover(
    function(){window.clearInterval(timer); i=1;}
);

$('#number_1, #number_2').mouseout(
    function(){
        $(this).unbind();
        timer = window.setInterval(function(){slideLogos();}, 4000); i=1;
    }
);


$('#number_3').hover(function(){$(this).unbind(); i++; show34();});
$('#number_4').hover(function(){$(this).unbind(); i++; show34();});

}

function show34(){
$('#number_3').unbind();
$('#number_4').unbind();

    // First slide
$('#number_1').css({
    position: 'absolute',
    top: '9px',
    left: '10px',
}).effect('slide', {
    direction: 'left',
    mode: 'show'
}, 'slow');

$('#slide_1').css({
    display: 'none'
});

// Second slide
$('#number_2').css({
    position: 'absolute',
    top: '9px',
    left: '48px',
}).effect('slide', {
    direction: 'left',
    mode: 'show'
}, 'slow');

$('#slide_2').css({
    display: 'none'
});

// Third slide  
$('#number_3').css({
    position: 'absolute',
    top: '9px',
    left: '86px'
}).effect('slide', {
    direction: 'right',
    mode: 'show'
}, 'slow');

$('#slide_3').css({
    display: 'inline-block',
    position: 'absolute',
    top: '9px',
    left: '123px',
}).effect('slide', {
    direction: 'right',
    mode: 'show'
}, 'slow');

// Forth slide
$('#number_4').css({
    position: 'absolute',
    top: '9px',
    left: '521px'
}).effect('slide', {
    direction: 'right',
    mode: 'show'
}, 'slow');

$('#slide_4').css({
    position: 'absolute',
    top: '9px',
    left: '558px',
}).effect('slide', {
    direction: 'right',
    mode: 'show'
}, 'slow');

$('#number_3, #number_4').hover(
    function(){window.clearInterval(timer); i=0;}
);

$('#number_3, #number_4').mouseout(
    function(){
        $(this).unbind();
        timer = window.setInterval(function(){slideLogos();}, 4000); i=0;
    }
);

$('#number_1').hover(function(){$(this).unbind(); i++; show12();});
$('#number_2').hover(function(){$(this).unbind(); i++; show12();});
}

function slideLogos(){


switch(i%2){
    case 0:
        show12();
        break;
    case 1:
        show34();
        break;
}
i++;
}

var i = 1;
var timer;

$('document').ready(function(){

show12();

timer = setInterval(function(){slideLogos();}, 4000);

});

Number_n - 滑块中始终显示数字，Slide_n - 是正在显示/隐藏的幻灯片，对此感到抱歉:)

Answer 1

由于 requestAnimationFrame() 的性质，您永远不应该使用 setInterval 或 setTimeout 循环对动画进行排队。

文档建议在元素上使用动画回调或 jQuery .queue() 函数。

jQuery Queue()

另外，这个关于队列的答案非常有趣：
jQuery 中的队列是什么？

Answer 2

我曾经遇到过同样的问题。我不会说脚本变得疯狂，因为动画似乎被缓存起来，直到我返回页面。我不知道你是否会遇到这种情况，但对我来说，滑动最终减慢回到正常速度。我还注意到所有浏览器都发生了同样的事情。所以我认为这一定是由 jQuery 引起的。果然，通过恢复到旧版本的 jQuery（1.5 而不是 1.6，如果我没记错的话），问题就消失了。