的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塊一起出現。我期待他們將以一秒的間隔逐一顯示。

我該如何解決這個問題？希望你的幫助。

來源

2016-04-30 programforjoy

你在同一時間打電話給他們。爲了清楚起見，僅使用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()。

來源

2016-04-30 05:42:07

所以問題是，當你點擊你調用setTimeout 3次的按鈕，所有setTimeouts延遲都是1秒？你的解決方案是動態改變每一次？每增加一個延遲時間1秒 –

正確。它們都從** now **延遲1秒，所以如果你想讓它們分開，你可以按順序給每個延遲加一個較大的延遲。但請注意，如果系統很忙，那麼他們可能仍然會以這種方式一次全部開火......鏈接會阻止這種情況發生。 –

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

-1

從一開始就創建一個全局變量
使用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

來源

2016-04-30 05:43:55

的javascript：使用的setTimeout在for循環中展現定期

回答

相關問題