web-dev-qa-db-ja.com

1ページで同時に設定できるjavascript setTimeout / setInterval呼び出しの数

少なくとも2つのsetTimeoutと1つのsetIntervalを使用する必要があります。これは、使用されているブラウザまたはJavaScriptエンジンに依存していますか？

javascriptsettimeout
26
rabbit

ページでは、必要な数のsetTimeouts/setIntervalsを一度に実行できますが、それぞれを個別に制御するには、それらを変数に割り当てる必要があります。

var interval_1 = setInterval("callFunc1();",2000);
var interval_2 = setInterval("callFunc2();",1000);
clearInterval(interval_1);

上記と同じコードがsetTimeoutに適用され、単に表現を置き換えます。

Kevinが述べたように、JavaScriptは確かにシングルスレッドであるため、一度に複数のタイマーを作動させることができますが、一度に1つだけを作動させることができます。つまり、たとえば、警告ボックスが表示されたら、別の人がトリガーする前にJSを「再開」する必要があります。

もう1つの例を以下に示します。マークアップは無効ですが、タイムアウトの仕組みを示しています。

<html>
    <body>
        <script type="text/javascript">
            function addThing(){
                var newEle = document.createElement("div");
                newEle.innerHTML = "Timer1 Tick";
                document.body.appendChild(newEle);
            }   
            var t1= setInterval("addThing();",1000);
            var t2 = setInterval("alert('moo');",2000);
        </script>
    </body>
</html>
22
Seidr

tl; dr：タイマーを10万個作成するまでは、タイマーのコストを気にする必要はありません。

このテストファイルを作成して、タイマーのパフォーマンスを簡単にテストしました（100Kのタイマーを繰り返し作成します）。

<script>
var n = 0; // Counter used to verify all timers fire

function makeTimers() {
  var start = Date.now();
  for (var i = 0; i < 100000; i++, n++) {
    setTimeout(hello, 5000);
  }
  console.log('Timers made in', Date.now() - start, 'msecs');
}

function hello() {
  if (--n == 0) {
    console.log('All timers fired');
    makeTimers(); // Do it again!
  }
}

setTimeout(makeTimers, 10000);  // Wait a bit before starting test
</script>

このファイルをGoogleで開いたChrome（v54）私の2014年頃のMacbook Pro）、開発者ツールの[タイムライン]タブに移動し、ページが読み込まれて実行されたときにメモリプロファイルを記録しました3-テストの4サイクル。

観測

タイマー作成ループには200msかかります。ページヒープサイズは、テスト前の3.5MBから始まり、3.9MBで横ばいになります。

結論

各タイマーのセットアップには〜.002ミリ秒かかり、JSヒープに約35バイトが追加されます。

20
broofa

いくつでも使えます。 JavaScriptはシングルスレッドであるため、どれも並列実行できないことを覚えておいてください。

11
kemiller2002

var interval_1 = setInterval("callFunc1();",2000);はeval()を呼び出しますが、これは悪いことです。代わりにこれを使用してくださいvar interval_1 = setInterval(callFunc1,2000);

そして質問については、好きなだけ使用できますが、2つのアクションの間隔がすべて同じである場合は、この方法を使用することをお勧めします

var interval = setInterval(function() {
  // function1
  fct1(); 
  // function2
  fct2();
 },2000);
6
xavierm02