29

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

4

4 に答える 4

26

tl;dr: 100K のタイマーを作成するまでは、タイマーのコストについて心配する必要はありません。

このテスト ファイルを作成して、タイマーのパフォーマンスを簡単にテストしました (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>

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

観察

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

結論

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

于 2016-12-03T14:17:42.120 に答える
25

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

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

上記と同じコードが setTimeout に適用され、単に文言を置き換えるだけです。

Kevin が述べているように、JavaScript は確かにシングル スレッドであるため、一度に複数のタイマーを作動させることができますが、一度に起動できるのは 1 つだけです。アラートボックスの場合、別のJSがトリガーされる前にJSを「再開」する必要があると思います。

さらに別の例を以下に示します。マークアップは無効ですが、タイムアウトがどのように機能するかを示しています。

<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>
于 2010-03-31T13:19:07.460 に答える
11

必要な数だけ使用できます。JavaScript はシングル スレッドであるため、並列に実行することはできません。

于 2010-03-31T13:14:23.087 に答える
6

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

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

var interval = setInterval(function() {
  // function1
  fct1(); 
  // function2
  fct2();
 },2000);
于 2010-03-31T13:57:16.903 に答える