javascript - 当我们有多个 setTimeouts 时，javascript 事件队列如何工作

Question

我正在考虑在 fadeIn、fadeOut 和 setTimeout 的帮助下制作轮播。这是一个jsfiddle .

我真的对 javascript 事件队列感到困惑。因为，在上面的示例中，我使用了两个 div，并尝试以固定的时间间隔fadeIn 和 fadeOut 它们。但是，这种情况并不是定期发生的。第二个 div 比第一个 div 消失得更快。

是否可以让它们有规律的间隔？

Answer 1

我不知道该对事件队列说什么，但你可以只用一个 bool 值来修复你的代码。

var isTopTurn = true; //boolean to remember which one should fade
$(document).ready(function(){
    setInterval(fadeHelper,3000);
});


function fade(top, bottom) {
    top.fadeOut(2000);
    bottom.fadeIn(2000);
}


function fadeHelper() {
    if (isTopTurn) {
        isTopTurn = false;
        fade($('.top'), $('.bottom'));

    } else {
        fade($('.bottom'), $('.top'));
        isTopTurn = true;
    }
}

jsfiddle