Javascript / Jquery中的setTimeout答案

【问题标题】：setTimeout in Javascript / JqueryJavascript / Jquery中的setTimeout
【发布时间】：2014-11-24 12:59:02
【问题描述】：

我正在尝试使用不同的内容测试循环播放的淡入淡出功能

    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，它运行得很好（并且我再次包含了淡入淡出）但是一旦我添加了带有淡入淡出功能的 setTimeout，它就会停止工作。我似乎找不到哪里出错了。谁能指出我正确的方向？

【问题讨论】：

setTimeout 工作 a-synch-ron-ous-ly。想想:)
如果我告诉你 fade 有回调会怎样
FadeIn != fadeIn - jsfiddle.net/arunpjohny/poqga8w0/1
我知道，然后使用淡入淡出 :)
遗憾的是，Javascript 对我来说仍然是新领域。感谢所有的伟大回应。 fadeIn 确实为我做到了。我很高兴我看到了很多解决这个问题的替代方法，老实说，我从没想过使用setInterval。

标签： javascript jquery html

【解决方案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

【讨论】：

【解决方案2】：

如果你想在动画之后执行一些东西，你可以这样做（链接）

current.fadeOut(500, function () {
    next.FadeIn(500);
    current = next;
});

要循环，我建议您使用间隔而不是 setTimeout。

setInterval(fade, 2000);

【讨论】：

【解决方案3】：

在“FadeIn”中，“f”应该很小

你的代码：

setTimeout(function(){
        next.FadeIn(500);
    },1000);

实际代码：

setTimeout(function(){
        next.fadeIn(500);
    },1000);

【讨论】：

【解决方案4】：

尝试使用 setInterval

var i = 0;

setInterval(function() {
    $(".twitterinner").fadeOut("fast");
           $(".twitterinner").eq(i).fadeIn("slow");

     i++;
    if(i == $(".twitterinner").length){
       i = 0;   
    }


} ,1000);

DEMO

【讨论】：

设置间隔是一个不错的方法（老实说，我从来没有想过。不得不做一些阅读），但我必须在你的代码中指出没有提供我想要的超时在淡出和回归之间。它们重叠，这不是意思。我确实为 setInterval 的想法点赞了你。

【解决方案5】：

您可以使用 setInterval，但如果您更喜欢使用 setTimeout 来控制它，最好同时设置一个超时并使用回调链接您的调用。

类似的东西：

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() {
        // executed after 500ms
        next.delay(500).fadeIn(500, function() {
            // executed after 500 + 500 +500 = 1500 ms;
            current = next;
            setTimeout(fade, 500); // executed after 1500 + 500 = 2000 ms.
        });
    });
}

或者如果你想有一个更清晰的脚本来执行所有这些，你可以为每个步骤定义一个函数（如果你的动画变得更复杂，这很有用）：

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

    current.fadeOut(500, step2);

    function step2() {
        // executed after 500ms
        next.delay(500).fadeIn(500, step3);
    }

    function step3() {
        // executed after 500 + 500 +500 = 1500 ms;
        current = next;
        setTimeout(fade, 500); // executed after 1500 + 500 = 2000 ms.
    }
}

【讨论】：