- ベストアンサー
テキストを繰り返し表記・非表示にする方法
- テキストを繰り返し表記・非表示にする方法について説明します。
- setInterval()関数を使用して、一定間隔でテキストを表示し、非表示にすることができます。
- また、テキストを隠すためにはCSSのdisplayプロパティを利用し、visibilityを切り替えることができます。
- htmlcss123
- お礼率66% (194/293)
- JavaScript
- 回答数11
- ありがとう数8
- みんなの回答 （11）
- 専門家の回答
質問者が選んだベストアンサー
>settimuoutがこの処理が終わるまではこれ以降の処理に移らなければ、簡単にこの後に次の処理を記載すれば二秒後に実行とできるのですが、 >この処理を待たずに次の処理を始めてしまう場合は次の処理を二秒後に実行とできませんよね。 >仕様上どちらなのかご存知ですか？ 詳しい仕様は知りませんでした。 JavaScriptのsetIntervaｌ関数の意味を正確に理解するための１つの説明 http://d.hatena.ne.jp/mindcat/20091018/1255889695 >setInterval関数を実行したときに、「現在時刻＋第２引数で指定した時間」の時刻をタスクに付けてキューに積みます。時間が経ち、そのタスクがキューの先頭に来ると、Scriptエンジンはそのタスクを実行します。その後に、タスクの時刻を「現在時刻＋第２引数で指定した時間」の時刻に更新して再びキューに積むという動作になります。従って、setInterval関数の第１引数で指定した関数の実行に関わる時間分だけ遅れることになります。 >if(TimerCntMax<=TimerCnt){ >は二秒後に >下記を止めているのですよね。 TimerCntがTimerCntMax以上の値になった場合ですが？。 >TxtArray[ArrayPrv].style.visibility = "visible"; >TxtArray[ArrayCnt].style.visibility = "hidden"; >は消えている物を出した瞬間に、消していますが、 >よく考えると出た瞬間に消えるというので基本的には問題ないですね。 だたテキストを消すだけでなく、その１つ前のテキストを表示しています。 カウンターが違う事に注意して下さい、「ArrayCnt」が現時点のテキスト、「ArrayPrv]」が1つ前のテキストです。 >ただこれだとふわっとは出てこないのでふわっと出すためにはcssで二秒後に実行するとすれば可能ですが、 >JSではこのようなことはできないのでしょうか？ JSでcssを使う場合は下記のように「style」を付ければ良いようです。 Txt = document.getElementById('TxtID'); Txt.style.～
その他の回答 (10)
- amanojaku1
- ベストアンサー率54% (265/488)
>インターバルよりアニメーションの実行時間の方が長いのは やはり問題がある 現在、アニメーション(FadeIn、FadeOut)が実行されているモノを妨げないなら、インターバルよりアニメーションの実行時間の方が長くても問題ありませんでした。 「ArrayPrv」が「(TxtArray.length+ArrayCnt-2)%TxtArray.length;」(配列の2つ前)の場合、FadeIn側から見たFadeOut側との間隔は「インターバルx2」となります(つまりDelayを含めたアニメーションの実行時間がFadeOut側は「インターバルx2」以下ならFadeIn側と衝突しません)。 また その(「ArrayPrv」が「(TxtArray.length+ArrayCnt-2)%TxtArray.length;」(配列の2つ前)の)場合、FadeOut側から見たFadeIn側との間隔は「インターバルx(配列長-2)」となります（つまりDelayを含めたアニメーションの実行時間がFadeIn側は「インターバルx(配列長-2)」以下ならFadeOut側と衝突しません）。 つまり、この場合 論理的な最小の全体の間隔は「インターバルx2+FadeIn側のDelayを含めたアニメーションの実行時間」となるので、配列の要素(テキスト)は最低でも3個以上必要になります(FadeIn側のDelayを含めたアニメーションの実行時間によっては それ以上必要になります)。 「ArrayPrv」が「(TxtArray.length+ArrayCnt-1)%TxtArray.length;」(配列の1つ前)の場合、FadeIn側から見たFadeOut側との間隔は「インターバルx1」となります(つまりDelayを含めたアニメーションの実行時間がFadeOut側は「インターバルx1」以下ならFadeIn側と衝突しません)。 また その(「ArrayPrv」が「(TxtArray.length+ArrayCnt-1)%TxtArray.length;」(配列の1つ前)の)場合、FadeOut側から見たFadeIn側との間隔は「インターバルx(配列長-1)」となります（つまりDelayを含めたアニメーションの実行時間がFadeIn側は「インターバルx(配列長-1)」以下ならFadeOut側と衝突しません）。 つまり、この場合 アニメーションの計算上の(配列の)全体の最小の実行時間の間隔は「インターバルx1+FadeIn側のDelayを含めたアニメーションの実行時間」となるので、配列の要素(テキスト)は最低でも2個以上必要になります(FadeIn側のDelayを含めたアニメーションの実行時間によっては それ以上必要になります)。 下記は、「ArrayPrv」は「(TxtArray.length+ArrayCnt-1)%TxtArray.length;」(配列の1つ前)、FadeIn側のDelayを含めたアニメーションの実行時間は「0.5+1=1.5秒」、インターバル=1000(1秒)、なのでアニメーションの計算上の(配列の)全体の最小の実行時間の間隔は「2.5秒」となり、配列の要素(テキスト)は最低でも3個以上必要になります(「アニメーションの計算上の(配列の)全体の最小の実行時間の間隔<2.5秒>/インターバル<1秒>=2.5」なので、少数を繰り上げて3となる(四捨五入ではなく、あくまでも少数の繰り上げ))。 <html> <head> <!-- この辺りにmetaタグでcharsetを指定して下さい --> <style type="text/css"> <!-- .FadeInAnimaCS { color: #000; opacity: 0; } .FadeInAnimaCS { animation: FadeInAnima 1s linear 0.5s 1 forwards; } @keyframes FadeInAnima { 100% { opacity: 1; } } .FadeOutAnimaCS { color: #000; opacity: 1; } .FadeOutAnimaCS { animation: FadeOutAnima 1s linear 0s 1 forwards; } @keyframes FadeOutAnima { 100% { opacity: 0; } } --> </style> </head> <div id="HogeID"> hoge </div> <div id="YamaguchiID"> yamaguchi </div> <div id="SontakuID"> sontaku </div> <div id="HugaID"> huga </div> <div id="PiyoID"> piyo </div> <script type="text/javascript"><!-- TimerCnt = 0; TimerCntMax = 20; // Intervalの繰り返し回数の指定。 ArrayCnt = 0; TxtArray = [ document.getElementById('HogeID'), document.getElementById('YamaguchiID'), document.getElementById('SontakuID'), document.getElementById('HugaID'), document.getElementById('PiyoID') ]; HdnArray = new Array(TxtArray.length); TimerId = setInterval( function () { if((TxtArray.length-1)<ArrayCnt){ ArrayCnt = 0; } ArrayPrv = (TxtArray.length+ArrayCnt-1)%TxtArray.length; // 「ArrayCnt-1」をマイナスにならないようにする。 if(HdnArray[ArrayPrv]===true){ HdnArray[ArrayPrv] = false; // true; // TxtArray[ArrayPrv].className = "FadeInAnimaCS"; } HdnArray[ArrayCnt] = true; // false; // TxtArray[ArrayCnt].className = "FadeOutAnimaCS"; ArrayCnt++; TimerCnt++; // ここをコメントにすれば永遠に繰り返します。 // 「TimerCntMax」は「TimerCnt」より大きな値にして下さい。 if(TimerCntMax<=TimerCnt){ clearInterval(TimerId); // 「setInterval()」を解除 } }, 1000); // --></script> </html>
- amanojaku1
- ベストアンサー率54% (265/488)
>回答No.9 amanojaku1 インターバルよりアニメーションの実行時間の方が長いのは やはり問題があるので、アニメーションの実行時間を変更します。 インターバルは「1000」に変更してあります。 ついでに「ArrayPrv = (TxtArray.length+ArrayCnt-1)%TxtArray.length;」を「ArrayPrv = (TxtArray.length+ArrayCnt-2)%TxtArray.length;」(２つ前)に変更しました。 テキストのキャラクターセットに合わせて、metaタグでcharsetを指定して下さい。 <html> <head> <!-- この辺りにmetaタグでcharsetを指定して下さい --> <style type="text/css"> <!-- .FadeInAnimaCS { color: #000; opacity: 0; } .FadeInAnimaCS { animation: FadeInAnima 1s linear 0s 1 forwards; } @keyframes FadeInAnima { 100% { opacity: 1; } } .FadeOutAnimaCS { color: #000; opacity: 1; } .FadeOutAnimaCS { animation: FadeOutAnima 1s linear 0s 1 forwards; } @keyframes FadeOutAnima { 100% { opacity: 0; } } --> </style> </head> <div id="HogeID"> hoge </div> <div id="YamaguchiID"> yamaguchi </div> <div id="SontakuID"> sontaku </div> <div id="HugaID"> huga </div> <div id="PiyoID"> piyo </div> <script type="text/javascript"><!-- TimerCnt = 0; TimerCntMax = 20; // Intervalの繰り返し回数の指定。 ArrayCnt = 0; TxtArray = [ document.getElementById('HogeID'), document.getElementById('YamaguchiID'), document.getElementById('SontakuID'), document.getElementById('HugaID'), document.getElementById('PiyoID') ]; HdnArray = new Array(TxtArray.length); TimerId = setInterval( function () { if((TxtArray.length-1)<ArrayCnt){ ArrayCnt = 0; } ArrayPrv = (TxtArray.length+ArrayCnt-2)%TxtArray.length; // 「ArrayCnt-1」をマイナスにならないようにする。 if(HdnArray[ArrayPrv]===true){ HdnArray[ArrayPrv] = false; // true; // TxtArray[ArrayPrv].className = "FadeInAnimaCS"; } HdnArray[ArrayCnt] = true; // false; // TxtArray[ArrayCnt].className = "FadeOutAnimaCS"; ArrayCnt++; TimerCnt++; // ここをコメントにすれば永遠に繰り返します。 // 「TimerCntMax」は「TimerCnt」より大きな値にして下さい。 if(TimerCntMax<=TimerCnt){ clearInterval(TimerId); // 「setInterval()」を解除 } }, 1000); // --></script> </html>
- amanojaku1
- ベストアンサー率54% (265/488)
CSSに関しては「回答No.8 amanojaku1」を参照してください、なお「回答No.8 amanojaku1」において「FadeOut、FadeIn」の名前と機能が逆でしたm(_ _)m インターバルは「1500」に変更してあります。 テキストのキャラクターセットに合わせて、metaタグでcharsetを指定して下さい。 <html> <head> <!-- この辺りにmetaタグでcharsetを指定して下さい --> <style type="text/css"> <!-- .FadeInAnimaCS { color: #000; opacity: 0; } .FadeInAnimaCS { animation: FadeInAnima 2s linear 0s 1 forwards; } @keyframes FadeInAnima { 100% { opacity: 1; } } .FadeOutAnimaCS { color: #000; opacity: 1; } .FadeOutAnimaCS { animation: FadeOutAnima 2s linear 0s 1 forwards; } @keyframes FadeOutAnima { 100% { opacity: 0; } } --> </style> </head> <div id="HogeID"> hoge </div> <div id="YamaguchiID"> yamaguchi </div> <div id="SontakuID"> sontaku </div> <div id="HugaID"> huga </div> <div id="PiyoID"> piyo </div> <script type="text/javascript"><!-- TimerCnt = 0; TimerCntMax = 20; // Intervalの繰り返し回数の指定。 ArrayCnt = 0; TxtArray = [ document.getElementById('HogeID'), document.getElementById('YamaguchiID'), document.getElementById('SontakuID'), document.getElementById('HugaID'), document.getElementById('PiyoID') ]; HdnArray = new Array(TxtArray.length); TimerId = setInterval( function () { if((TxtArray.length-1)<ArrayCnt){ ArrayCnt = 0; } ArrayPrv = (TxtArray.length+ArrayCnt-1)%TxtArray.length; // 「ArrayCnt-1」をマイナスにならないようにする。 if(HdnArray[ArrayPrv]===true){ HdnArray[ArrayPrv] = false; // true; // TxtArray[ArrayPrv].className = "FadeInAnimaCS"; } HdnArray[ArrayCnt] = true; // false; // TxtArray[ArrayCnt].className = "FadeOutAnimaCS"; ArrayCnt++; TimerCnt++; // ここをコメントにすれば永遠に繰り返します。 // 「TimerCntMax」は「TimerCnt」より大きな値にして下さい。 if(TimerCntMax<=TimerCnt){ clearInterval(TimerId); // 「setInterval()」を解除 } }, 1500); // --></script> </html>
- amanojaku1
- ベストアンサー率54% (265/488)
下記はJavaScriptではなく、HTML、CSSの話です。 [CSS3][Sass] 要素を順番にフワッと表示するアニメーションを CSS の animation プロパティで作る https://memocarilog.info/webdesign/8050 CSS3のtransition-timing-functionの動きをサンプルで理解しよう http://weboook.blog22.fc2.com/blog-entry-313.html 「linear、ease～」の違いが視覚的に分かるサイト(サイトには「transition-timing-functionの違い」と書かれています)。 下記はJavaScriptではなく、HTML、CSSのソースです。 「opacity」は透明度。 >animation: FadeOutAnima 1s linear 0s 1 forwards; ↑2番目の数字がスタート：この例では0秒後にスタート(つまり、すぐスタート)。 1番目の数字がアニメーションを実行する時間：この例では1秒間アニメーションする。 3番目の数字が「FadeOutAnima」のキーワード(予約語ではありません)で参照される「@keyframes」の「100%」に対応する？、その「100%」は そのブロック内の「opacity: 1;」(透明度：1)に対応する。 >animation: FadeInAnima 1s linear 1s 1 forwards; ↑2番目の数字がスタート：この例では1秒後にスタート。 1番目の数字がアニメーションを実行する時間：この例では1秒間アニメーションする。 3番目の数字が「FadeInAnima」のキーワード(予約語ではありません)で参照される「@keyframes」の「100%」に対応する？、その「100%」は そのブロック内の「opacity: 0;」(透明度：0)に対応する。 <html> <head> <meta http-equiv="Content-Type" content="Text/HTML; charset=Shift_JIS"> <style type="text/css"> <!-- .FadeOutAnimaCS { color: #000; opacity: 0; } .FadeOutAnimaCS { animation: FadeOutAnima 1s linear 0s 1 forwards; } @keyframes FadeOutAnima { 100% { opacity: 1; } } .FadeInAnimaCS { color: #000; opacity: 1; } .FadeInAnimaCS { animation: FadeInAnima 1s linear 1s 1 forwards; } @keyframes FadeInAnima { 100% { opacity: 0; } } --> </style </head> <ul> <li class="FadeOutAnimaCS">hoge</li> <li class="FadeInAnimaCS">piyo</li> </ul> </html>
- amanojaku1
- ベストアンサー率54% (265/488)
>for(var i = 0; i <= arrayItem.length; i=i++) { >出たり消えたりする処理 >} 無限ループだとすればi変数をforループ内で上書きしてませんか？、そうでないなら「出たり消えたりする処理」自体に問題がある可能性があります。
お礼
https://codepen.io/anon/pen/zzqjKg のようにiの変更を確かにしています。 それが原因でフリーズするのですか？
補足
頂いたソースコートは勉強させていただきますが、 for分の影響でブラウザがフリーズする県はどうでしょうか？
- amanojaku1
- ベストアンサー率54% (265/488)
>回答No.5 amanojaku1 >>TxtArray[ArrayPrv].style.visibility = "visible"; >>TxtArray[ArrayCnt].style.visibility = "hidden"; >>この二つの式が2秒ならおそらく1秒ごとに実行して合計で2秒になるのでしょうね。 >くどいようですが それらは別々のテキストです、「ArrayCnt」が現時点のテキスト、「ArrayPrv]」が1つ前のテキストですので、同時に(ふわっと消す、ふわっと出るを)実行しても良いモノです。 TxtArray = [ document.getElementById('HogeID'), document.getElementById('YamaguchiID'), document.getElementById('SontakuID'), document.getElementById('HugaID'), document.getElementById('PiyoID') ]; ↑この配列に定義されている配列要素(この場合テキスト)をカウンターで参照しています(配列はゼロ・スタートです)。 例えば「ArrayPrv = (TxtArray.length+ArrayCnt-1)%TxtArray.length;」の式で「ArrayCnt」の1つ前の値を演算していますので、「ArrayCnt」が1の場合(テキストは「yamaguchi」となる)、「ArrayPrv」は０になります(テキストは「hoge」となる)。 また、「ArrayCnt」が０の場合(テキストは「hoge」となる)、「ArrayPrv」は4になります(テキストは「piyo」となる)。 「ArrayPrv = (TxtArray.length+ArrayCnt-1)%TxtArray.length;」でマイナスにならないように計算しています(-1の場合は ぐるっと回って最後尾となる)。
お礼
んーん難しですね。 教えていただいた情報をもとに自分で作ってみてうまくいっていそうなのに前回記載した通り今度はフリーズする問題が発生しました。 forが終わらないからでそうか？
- amanojaku1
- ベストアンサー率54% (265/488)
>JavaScriptのsetIntervaｌ関数の意味を正確に理解するための１つの説明 >http://d.hatena.ne.jp/mindcat/20091018/1255889695 > >>setInterval関数を実行したときに、「現在時刻＋第２引数で指定した時間」の時刻をタスクに付けてキューに積みます。時間が経ち、そのタスクがキューの先頭に来ると、Scriptエンジンはそのタスクを実行します。その後に、タスクの時刻を「現在時刻＋第２引数で指定した時間」の時刻に更新して再びキューに積むという動作になります。従って、setInterval関数の第１引数で指定した関数の実行に関わる時間分だけ遅れることになります。 ↑申し訳ございません、これは「setInterval」の仕様です。 >TxtArray[ArrayPrv].style.visibility = "visible"; >TxtArray[ArrayCnt].style.visibility = "hidden"; >この二つの式が2秒ならおそらく1秒ごとに実行して合計で2秒になるのでしょうね。 くどいようですが それらは別々のテキストです、「ArrayCnt」が現時点のテキスト、「ArrayPrv]」が1つ前のテキストですので、同時に(ふわっと消す、ふわっと出るを)実行しても良いモノです。
お礼
おかげさまでやり方はだいぶ分かったのですがブラウザがフリーズしてしまいます。 ・ function loop() { for(var i = 0; i <= arrayItem.length; i=i++) { 出たり消えたりする処理 } } setTimeout( loop(), 4000); } loop(); ・timuoutの部分を削除してintervalにしても同じです。 setInterval( loop(), 8000); forが無限ループだからでしょうか？
- amanojaku1
- ベストアンサー率54% (265/488)
>ここで隠していたテキストを表記して、 >すぐ直後で隠していますが、 >これだと出た瞬間に消えてしまうので、人間の目では認識できないくないですか？ >二秒くらいは出しておきたいのですが。 実際にページを表示させて見て下さい。 >TxtArray[ArrayPrv].style.visibility = "visible"; >TxtArray[ArrayCnt].style.visibility = "hidden"; カウンターが違います。 「ArrayCnt」が現時点、「ArrayPrv」が1つ前です。
お礼
＞＞＞ if(TxtArray[ArrayCnt].style.visibility!="hidden"){ ArrayPrv = (TxtArray.length+ArrayCnt-1)%TxtArray.length; // 「ArrayCnt-1」をマイナスにならないようにする。 TxtArray[ArrayPrv].style.visibility = "visible"; TxtArray[ArrayCnt].style.visibility = "hidden"; ArrayCnt++; } TimerCnt++; // ここをコメントにすれば永遠に繰り返します。 // 「TimerCntMax」は「TimerCnt」より大きな値にして下さい。 if(TimerCntMax<=TimerCnt){ clearInterval(TimerId); // 「setInterval()」を解除 } }, 2000); を見ると if(TimerCntMax<=TimerCnt){ は二秒後に 下記を止めているのですよね。 TimerId = setInterval( function () { if((TxtArray.length-1)<ArrayCnt){ ArrayCnt = 0; } TxtArray[ArrayPrv].style.visibility = "visible"; TxtArray[ArrayCnt].style.visibility = "hidden"; は消えている物を出した瞬間に、消していますが、 よく考えると出た瞬間に消えるというので基本的には問題ないですね。 ただこれだとふわっとは出てこないのでふわっと出すためにはcssで二秒後に実行するとすれば可能ですが、 JSではこのようなことはできないのでしょうか？ settimeoutで二秒後に実行はできますが、消してから二秒後に出現と連続した作業を遅らす方法はないのですかね？
補足
settimuoutがこの処理が終わるまではこれ以降の処理に移らなければ、簡単にこの後に次の処理を記載すれば二秒後に実行とできるのですが、 この処理を待たずに次の処理を始めてしまう場合は次の処理を二秒後に実行とできませんよね。 仕様上どちらなのかご存知ですか？
- amanojaku1
- ベストアンサー率54% (265/488)
まずIDはページ内で一意でなければなりません。 <div id="HogeID"> hoge </div> <div id="YamaguchiID"> yamaguchi </div> <div id="SontakuID"> sontaku </div> <div id="HugaID"> huga </div> <div id="PiyoID"> piyo </div> <script type="text/javascript"><!-- TimerCnt = 0; TimerCntMax = 20; // Intervalの繰り返し回数の指定。 ArrayCnt = 0; TxtArray = [ document.getElementById('HogeID'), document.getElementById('YamaguchiID'), document.getElementById('SontakuID'), document.getElementById('HugaID'), document.getElementById('PiyoID') ]; TimerId = setInterval( function () { if((TxtArray.length-1)<ArrayCnt){ ArrayCnt = 0; } if(TxtArray[ArrayCnt].style.visibility!="hidden"){ ArrayPrv = (TxtArray.length+ArrayCnt-1)%TxtArray.length; // 「ArrayCnt-1」をマイナスにならないようにする。 TxtArray[ArrayPrv].style.visibility = "visible"; TxtArray[ArrayCnt].style.visibility = "hidden"; ArrayCnt++; } TimerCnt++; // ここをコメントにすれば永遠に繰り返します。 // 「TimerCntMax」は「TimerCnt」より大きな値にして下さい。 if(TimerCntMax<=TimerCnt){ clearInterval(TimerId); // 「setInterval()」を解除 } }, 2000); // --></script>
お礼
IDは0,1,2とついているのでちゃんとユニークになってますよ。 ＞＞＞ TimerId = setInterval( function () { if((TxtArray.length-1)<ArrayCnt){ ArrayCnt = 0; } ここで最後のインデックス番号になったら初期化をしてループさせているのですね。 ＞＞＞ if(TxtArray[ArrayCnt].style.visibility!="hidden"){ ArrayPrv = (TxtArray.length+ArrayCnt-1)%TxtArray.length; // 「ArrayCnt-1」をマイナスにならないようにする。 TxtArray[ArrayPrv].style.visibility = "visible"; TxtArray[ArrayCnt].style.visibility = "hidden"; ArrayCnt++; } ここで隠していたテキストを表記して、 すぐ直後で隠していますが、 これだと出た瞬間に消えてしまうので、人間の目では認識できないくないですか？ 二秒くらいは出しておきたいのですが。
- amanojaku1
- ベストアンサー率54% (265/488)
<div id="TxtID"> hoge </div> <script type="text/javascript"><!-- TxtCnt = 0; TxtMax = 10; // Intervalの繰り返し回数の指定。 Txt = document.getElementById('TxtID'); TimerId = setInterval( function () { Txt if(Txt.style.visibility!="hidden"){ Txt.style.visibility = "hidden"; }else{ Txt.style.visibility = "visible"; } TxtCnt = TxtCnt+1; // ここをコメントにすれば永遠に繰り返します。 // 「TxtMax」は「TxtCnt」より大きな値にして下さい。 if(TxtMax<=TxtCnt){ clearInterval(TimerId); // 「setInterval()」を解除 } }, 2000); // --></script>
お礼
いつもありがとうございます。 https://codepen.io/anon/pen/BZjvYO こちらにいただいたものを再現しました。 確かに一つだけの場合はこのようなイメージですが、 三つテキストがあって、スライドショーのようにふわっと切り替える場合はどうでしょうか？ textcontentの代入するテキストを変えるようにした方がいいのでしょうか？
お礼
http://d.hatena.ne.jp/amachang/20060910/1157911122 を見るとsettimeoutが10秒だった場合10秒待ってから次の処理をするわけではなく、こちらの処理はおいておいて次の処理に進むというようなことが書いてありますね。 つまりsettimeout の中の式は10秒後に実行されるがその下にある処理は１０秒後に実行されるわけではないようですね。 今回はふわっと消してふわっと出るCSSをsettimeoutで2秒間に行えばそのようになりそうですね。 TxtArray[ArrayPrv].style.visibility = "visible"; TxtArray[ArrayCnt].style.visibility = "hidden"; この二つの式が2秒ならおそらく1秒ごとに実行して合計で2秒になるのでしょうね。