的javascript：使用的setTimeout在for循环中展现定期

问题描述：

我想告诉每隔一段时间（一秒）3行文字，下面的代码：的javascript：使用的setTimeout在for循环中展现定期

<html> 
    <head> 
    <script type="text/javascript" src="/jquery/jquery.js"></script> 
    <script type="text/javascript"> 
    function showText() 
    { 
     var itemlist = document.getElementsByClassName("test"); 
     function additem(index) { 
      setTimeout(function(){itemlist[index].setAttribute("style", "display:block;");}, 1000); 
     } 
     for(var i=0;i<itemlist.length;++i) { 
      additem(i); 
     } 
    } 
    </script> 
    </head> 

    <body> 
     <input type="button" value="show" onClick="showText()"> 
     <div class="test" style="display:none">first</div> 
     <div class="test" style="display:none">second</div> 
     <div class="test" style="display:none">third</div> 
    </body> 
    </html>

但结果是：当我点击显示按钮，第二秒，所有三个div块一起出现。我期待他们将以一秒的间隔逐一显示。

我该如何解决这个问题？希望你的帮助。

答

你在同一时间打电话给他们。为了清楚起见，仅使用line1。

setTimeout(line1, 1000); 
setTimeout(line2, 1000); 
setTimeout(line3, 1000);

他们不“堆叠”。所有三项功能都将在1秒内运行。

您有两种选择。选项1：

setTimeout(line1, (1 + index) * 1000); 
setTimeout(line2, (1 + index) * 1000); 
setTimeout(line3, (1 + index) * 1000);

这将导致它们一个接一个地超时。

另一种选择是使超时拨打下一个：

var index = 0; 
function showNextLine() { 
    // show line index 
    index++; 
    if (index < 3) { 
     setTimeout(showNextLine, 1000); 
    } 
} 
setTimeout(showNextLine, 1000);

这样，他们“链”就像你可能期待。

还有其他的变化，你甚至可以使用setInterval()和clearInterval()。

所以问题是，当你点击你调用setTimeout 3次的按钮，所有setTimeouts延迟都是1秒？你的解决方案是动态改变每一次？每增加一个延迟时间1秒 –

正确。它们都从** now **延迟1秒，所以如果你想让它们分开，你可以按顺序给每个延迟加一个较大的延迟。但请注意，如果系统很忙，那么他们可能仍然会以这种方式一次全部开火......链接会阻止这种情况发生。 –

第二种方式真是太棒了！非常感谢。 – programforjoy

答

从一开始就创建一个全局变量
使用setInterval函数
增量次数，每次当setInterval的执行
开始，如果再达到去年（如果差异。B/W否。申报单和计数是小于1）
淡出除了当前

$(document).ready(function() { 
 
    var count = 0; 
 
    setInterval(function() { 
 
    showIframe(count); 
 
    count++; 
 
    if (($('.wall-display').length - count) < 1) { 
 
        count = 0; 
 
       } 
 
    }, 1000); 
 
    function showIframe(count) { 
 
    $('.wall-display').fadeOut('fast'); 
 
    $('#frame' + count).fadeIn('fast'); 
 
    } 
 
    
 
    
 
});

.wall-display:not(:first-child) { 
 
    display: none; 
 
    position: absolute; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="wall-display" id='frame0'>I'm first text</div> 
 
<div class="wall-display" id='frame1'>I'm second text</div> 
 
<div class="wall-display" id='frame2'>I'm third text</div>

所有div

的javascript：使用的setTimeout在for循环中展现定期

相关推荐