Javascript 在某些设置间隔+；jQuery FadeIn/FadeOut

我正在尝试淡入/淡出div中的一些文本。为了调试的目的，我将时间保持得非常快。问题是，我认为淡入淡出是在互相争斗。有时文本会更新，然后淡入/淡出

代码如下：

var tips = [
    'AAA',
    'BBB',
    'CCC'
];

var currentTipIndex = 0;
setInterval(function () {
    currentTipIndex++;
    if (currentTipIndex >= tips.length) {
        currentTipIndex = 0;
    }
    $("#pewpew").fadeOut(1000);
    $("#pewpew").html(tips[currentTipIndex]);
    $("#pewpew").fadeIn(1000);
}, 1 * 5 * 1000);​

这就像是想让间隔计时器停止。然后淡出。（等待淡出完成）。更新文本。淡入。（等待淡入开始）。然后再次启动计时器。

更新：

// Rotating Tips.
var tips = ['AAA', 'BBB', 'CCC'];

var currentTipIndex = 0;

function recursiveTimeout() {
    setTimeout(function () {
        currentTipIndex++;
        if (currentTipIndex >= tips.length) {
            currentTipIndex = 0;
        }
        $("#pewpew").fadeOut(1000, function () {
            $("#pewpew").html(tips[currentTipIndex]);
        });

        $("#pewpew").fadeIn(1000, recursiveTimeout());
    }, 1 * 5 * 1000);

};
recursiveTimeout();

使用淡出回调可确保在加载内容之前动画已完成。然后在fadeIn中创建递归回调，完成后启动计时器

更新的小提琴：。

试试这个

var tips = [
    'AAA',
    'BBB',
    'CCC'
];

function fadeIn(html) {
    $("#pewpew").html(html);
    $("#pewpew").fadeIn(1000, function() {
        $("#pewpew").fadeOut(1000, getNextTip);
    });
}

var currentTipIndex = 0;
function getNextTip() {
    if (currentTipIndex >= tips.length)
        currentTipIndex = 0;

    var cTip = tips[currentTipIndex];
    fadeIn(cTip);

    currentTipIndex++;
}

$(function() {
    getNextTip();
});
​

---

使用带有淡出和淡出的回调函数。看到这个答案有助于我的情况@infra stank谢谢！但我很好奇，为什么在fadeIn回调函数计时器上用1乘以5*1000*noob问题：P