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

Мне нужно использовать atleast 2 setTimeouts и 1 setInterval. Имеет ли это зависимость от используемого браузера или javascript?

Ответ 1

На странице вы можете иметь как можно больше 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>

Ответ 2

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

Ответ 3

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 МБ.

Заключение

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

Ответ 4

var interval_1 = setInterval("callFunc1();",2000); вызывает eval(), который является злым, поэтому он ПЛОХО. Вместо этого используйте var interval_1 = setInterval(callFunc1,2000);

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

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