Javascript - Почему эта функция повторяется дважды?

Question

Пытаюсь решить эту проблему, но безуспешно в течение нескольких часов ...

У меня есть

var screen1 = $('#screen');
var screen2 = $('#screen_teams');
var screen3 = $('#field_position');
. . .

screenFade(screen1,1000,1);
function screenFade(screen,delay,next) {
    if (next == 1) {
        screen.delay(delay).fadeOut(1000, function() {animation(2);console.log('2');});
    } else {
        screen.fadeIn(1000).delay(delay).fadeOut(1000, function() {animation(next);console.log(next);});
    }
}
function animation(seq) {
    if (seq == 2) {
        screenFade(screen2,2000,3);
    };
    if (seq == 3) {
        screenFade(screen3,2000,4);
    };
    if (seq == 4) {
        screenFade(screen4,2000,5);
    };
}

И выходы firebug: 2 2 3 3 4 4 5 5

Знаете ли вы решение?Заранее спасибо!

Answer 1

Я думаю, что вашей самой большой проблемой является рекурсивная природа вашего кода ... Я думаю, что небольшое упрощение в порядке.

Если вы поместите все свои «экраны» в качестве дочерних элементов родительского элемента, вы можете легко использовать плагин поворота, который я написал для jQuery:

Если родительский элемент имел идентификатор screens и каждый экран был дочерним div, тогда вы могли бы использовать плагин следующим образом:

function() rotateCallback(screenNumber, screen) {
    if(screenNumber == 4)
        callOtherFunction();
}

$(function() {
    $("#screens div").Rotate({ cycleTime: 2000, fadeTime: 1000, callback: rotateCallback});
})

В событии загрузки окна будут выбраны все дочерние элементы родительского элемента с идентификатором screens, а затем они будут вращаться каждые 2 секунды, исчезая в течение 1 секунды.

Вот код плагина:

jQuery.fn.Rotate = function(config) {
    var currentIdx = 0;
    var items = [];
    var itemCount = this.each(function(idx, item) {
        items.push($(item));
    }).length;

    function rotateItem()
    {
        var front = items[currentIdx];
        var back = items[currentIdx = ((currentIdx + 1) % itemCount)];

        back.fadeIn(config.fadeTime);
        front.fadeOut(config.fadeTime, function() { front.hide() });

        if(config.callback)
            config.callback(currentIdx, back);
    }
    setInterval(rotateItem, config.cycleTime);
}

- Обновление -

Добавлен обратный вызов при вращении и пример.