javascript - 遇到一些 setInterval + jQuery FadeIn/FadeOut 问题

Question

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

See this interactive example on JS Fiddle

代码如下:

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);​

就像希望间隔计时器停止一样。然后淡出。 (等待淡入淡出完成)。更新文本。淡入。(等待淡入开始)。然后再次启动计时器。

Answer 1

更新:

// 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();

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

更新的 fiddle :http://jsfiddle.net/ZCadu/2/ .