jquery - 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 输出:22334455

你知道解决办法吗？提前致谢!

Answer 1

我认为你最大的问题是代码的递归性质......我认为需要进行一些简化。

如果您将所有“屏幕”作为父元素的子元素，那么您可以轻松使用我为 jQuery 编写的旋转插件:

如果父元素的 ID 为 screens 并且每个屏幕都是子 div 那么您可以像这样使用插件:

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

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

在窗口加载事件中，这将选择 ID 为 screens 的父级的所有子 div，然后每 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);
}

--更新--

添加了旋转回调和示例。