Сколько вызовов javascript setTimeout / setInterval можно установить одновременно на одной странице? - PullRequest
Новая
       31

Сколько вызовов javascript setTimeout / setInterval можно установить одновременно на одной странице?

26 голосов
/ 31 марта 2010

Я должен использовать как минимум 2 setTimeouts и 1 setInterval. Имеет ли это какую-либо зависимость от используемого браузера или движка JavaScript?

Ответы [ 4 ]

22 голосов
/ 31 марта 2010

На странице вы можете запускать столько setTimeouts / setIntervals одновременно, сколько пожелаете, однако для управления каждым из них вам нужно будет присвоить их переменной. 

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

Тот же код выше применяется к setTimeout, просто заменяя формулировку.

Как сказал Кевин, JavaScript действительно является однопоточным, поэтому, хотя у вас может быть несколько тиковых таймеров одновременно, только один может срабатывать одновременно, то есть, если у вас есть один, который запускает функцию, которая «останавливается» при исполнении например, с окном оповещения, тогда 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>
20 голосов
/ 03 декабря 2016

tl; dr: Не беспокойтесь о стоимости таймеров, пока вы не создадите 100K из них.

Я только что сделал быстрый тест производительности таймера, создав этот тестовый файл (создает таймеры 100 КБ снова и снова): 

<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) на моем MacBook Pro около 2014 года и зашел на вкладку «Временная шкала» в инструментах разработчика и записал профиль памяти в виде загруженной страницы и выполнил 3-4 цикла теста.

Наблюдения

Цикл создания таймера занимает 200 мс. Размер кучи страниц начинается с 3,5 МБ предварительного тестирования и выравнивается до 3,9 МБ.

Заключение

Каждый таймер занимает ~ 0,002 мсек для настройки и добавляет около 35 байтов в кучу JS.

11 голосов
/ 31 марта 2010

Вы можете использовать столько, сколько хотите. Просто помните, что JavaScript является однопоточным, поэтому ни один из них не может выполняться параллельно.

6 голосов
/ 31 марта 2010

var interval_1 = setInterval("callFunc1();",2000); звонит eval(), что зло, так что это плохо. Используйте это вместо var interval_1 = setInterval(callFunc1,2000);

И для вопроса, вы можете использовать столько, сколько хотите, но если у всех одинаковый интервал между двумя действиями, вам лучше сделать это так 

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