のjavascript：私は定期的な間隔（1秒）で3行を表示したい定期的に

をテキストを表示するforループ内のsetTimeoutを使用して、ここでのコードがあります：のjavascript：私は定期的な間隔（1秒）で3行を表示したい定期的に

<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>

しかし、結果は次のとおりです。私がクリックしたとき2番目の後のすべての3つのdivブロックが一緒に表示されます.1秒間隔で1つずつ表示されることを期待していました。

どうすればこの問題を解決できますか？あなたの助けを願います。

出典

2016-04-30 programforjoy

あなたは同時にすべてを呼び出しています。分かりやすくするためにline1を使用するだけです。

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

「スタック」しません。 3つの機能はすべて1秒で実行されます。

2つのオプションがあります。オプション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秒増加する –

正しい。 ** **から** 1秒間遅延しますので、間隔を空けておきたい場合は、順番にそれぞれの遅延を大きくすることができます。しかし、システムがビジー状態であれば、それでもそれらを一度にすべて発射する可能性があることに注意してください。 –

2番目の方法は本当に素晴らしいです！どうもありがとう。 – programforjoy

-1

インクリメント回数にそれはdiffの場合（最後に到達した場合のsetIntervalは最初から再び
スタートを実行するたびに、グローバル変数
使用するsetInterval関数を作成します。/ wの番号のdiv、カウントB 1未満）
フェードアウト現在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：私は定期的な間隔（1秒）で3行を表示したい定期的に

答えて

関連する問題