Ошибка нескольких слайд-эффектов 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, если я правильно помню).