Question

我正在考虑在fadeIn，fadeOut和setTimeout的帮助下制作旋转木马。这是jsfiddle。

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

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

Answer 1

由于您使用的是jQuery，因此您的代码是异步执行的。这意味着代码不会等待你的被调用函数完成移动到下一个调用，它会调用一个函数并移动到下一个函数。

您需要做的是使用setTimeout函数调用一个fade，并在该函数内调用另一个setTimeout到fadeIn/fadeOut您的div，如下所示：

$(document).ready(function(){
    setInterval(fadeHelper,6000);
});

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

function fadeHelper(){    
    setTimeout(fade($('.top'),$('.bottom')),3000);
}

这是一个有效的jsfiddle。

修改由于您希望淡入淡出从开始3秒开始，您必须将setInterval上的时间设置为3秒并移除setTimeout在fadeHelper函数中。
这是一个有效的jsfiddle。 Nevermind

Answer 2

我不知道该怎么说事件队列，但你可以用布尔值来修复你的代码。

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

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

2 个答案: