javascript - Javascript/Jquery 中的 setTimeout

Question

我正在尝试测试具有不同内容的循环淡入和淡出功能

    var next = null;
    var outer = $('.twitter');
    var current = outer.find('.twitterinner:first');
    current.fadeIn();
    function fade() {
        if (current.next('div.twitterinner').length > 0) {
            next = current.next('div.twitterinner');
        } else {
            next = outer.find('div.twitterinner:first');
        }

        current.fadeOut(500);
        setTimeout(function(){
            next.FadeIn(500);
        },1000);
//      next.fadeIn(500);
        current = next;
        setTimeout(fade, 2000);
    }
    fade();

和 html

<div class="col-xs-12 col-md-12 padding twitter">    
    <div class="twitterinner">Jellyfish Webdesign was afgelopen weekend aanwezig bij #YoutopiaArtsFestifal in het #Lloydhotel in A'dam! De website hebben we gesponsord.<br></div>
    <div class="twitterinner">Laat uw email adres achter via http://t.co/MHUXpcY1NE om op de hoogte te blijven van onze nieuwe website release. #Jellyfishux<br></div>
    <div class="twitterinner">Jellyfish Webdesign is vandaag officieel live gegaan! Voor meer informatie bezoek onze website, http://t.co/MHUXpcY1NE #jellyfishux<br></div>                
</div>

如果我在启动后删除setTimeout，它运行得很好(并且我再次包含fadeIn)，但是一旦我添加带有fadein函数的setTimeout，它就会停止工作。我似乎找不到我哪里出错了。谁能指出我正确的方向？

Answer 1

我认为您必须使用 setInterval() 而不是 setTimeout() 因为您的函数会重复调用。见下面代码

注意 - 请更正 fadeIn(500) 的拼写，它以小写的 f 开头。

var next = null;
    var outer = $('.twitter');
    var current = outer.find('.twitterinner:first');
    current.fadeIn();
    function fade() {
        if (current.next('div.twitterinner').length > 0) {
            next = current.next('div.twitterinner');
        } else {
            next = outer.find('div.twitterinner:first');
        }

        current.fadeOut(500, function(){
           next.fadeIn(500);
            current = next;
        });
    }
   setInterval(fade,2000);

<强> DEMO