Javascript jQuery在离开页面几分钟后出现多个幻灯片效果错误

我的自定义滑块脚本有一个bug。当我在页面上时，一切都很顺利，但当我打开另一个选项卡浏览一分钟左右，然后回到我的页面时，我的脚本就疯狂了。。。脚本非常简单

-滑块中没有图像，这就是为什么它看起来不像应该的那样漂亮

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\u n

-数字总是显示在滑块中，

Slide\u n

-是正在显示/隐藏的幻灯片，对此表示抱歉：）

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

由于requestAnimationFrame（）的性质，您不应该使用setInterval或setTimeout循环对动画进行排队

文档建议对元素使用动画回调或jQuery.queue（）函数

另外，关于队列的这个答案非常有趣：

---

1）您需要用英语对代码进行注释或分解。这个问题只能在奇怪的情况下复制，而且javascript变量/函数名的命名都很糟糕，没有给出实际发生的情况的上下文。而且多次设置“position:absolute”是多余的，也不是必要的。谢谢您的评论。我将尝试删除

position:absolute

。你应该更仔细地阅读这些文件。请查看张贴的答案。您认为

Queue（）

可以立即（而不是同时）启动动画吗？我的book Manning jQuery正在运行中，对此主题没有任何内容。队列不会改变当前动画逻辑的行为，它只是确保行为一致的机制。尝试使用回调函数添加队列（），并确保同时调用Dequeue（）。有关各种代码示例，请参见jquery文档。