Какая скорость «setInterval» при переключении страницы?

Вот моя страница. Это демо для тестирования перемещения элемента, но после того, как вы когда-нибудь изменили свою страницу и вернулись сюда, почему DIV движется быстрее?

Мой css:

  • Asp.net mvc передает объект C # в Javascript
  • JavaScript: лучший способ определить IE
  • Javascript / jQuery - отображает диапазон чисел в другой диапазон чисел
  • Почему мое устройство Android не воспроизводит видео в формате HTML5, загруженное как Blob через XHR?
  • Я получаю эту ошибку!
  • JavaScript - невозможно установить свойство неопределенного
  • #box1 { width: 900px; height: 50px; background-color: #000; position: relative; } #box2 { width: 50px; height: 50px; background-color: #a00; position: absolute; } 

    Мой HTML:

     <div id="box1"> <div id="box2"></div> </div> 

    Мои Js:

     var box2 = document.getElementById("box2"); var remove = setInterval(function () { box2.style.left = "0px"; var move = setInterval(function () { var newLeft = Math.min(parseInt(box2.style.left) + 5, 850) + "px"; box2.style.left = newLeft; if (newLeft == "850px") clearInterval(move) }, 20); }, 5000) 

    3 Solutions collect form web for “Какая скорость «setInterval» при переключении страницы?”

    Mozilla Firefox и Google Chrome задерживают скорость тиков, когда интервал, когда вкладка неактивна (Источники: http://pivotallabs.com/users/mrushakoff/blog/articles/2035-chrome-and-firefox-throttle-settimeout- Setinterval-in-inactive-tabs , https://stackoverflow.com/a/6032591/1756941 )

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

    JS:

     var tick = 20; var newLeft=0; var box2 = document.getElementById("box2"); var remove = setInterval(function() { box2.style.left = "0px"; var now, before = new Date(); var move = setInterval(function() { now = new Date(); var elapsedTime = (now.getTime() - before.getTime()); if (elapsedTime > tick) { console.log((Math.floor(elapsedTime / tick) * 5)); newLeft = Math.min(parseInt(box2.style.left) + (Math.floor(elapsedTime / tick) * 5), 850) + "px"; } else { newLeft = Math.min(parseInt(box2.style.left) + 5, 850) + "px"; } box2.style.left = newLeft; before = new Date(); if (newLeft == "850px"){clearInterval(move);} }, tick); }, 5000);​ 

    JSFiddle: http://jsfiddle.net/3jY8h/1/

    Нельзя доверять ставке setInterval . Браузер может не запускать его, если вкладка не сфокусирована, а также может запускать ее чаще, чем необходимо.

    Поведение стандартизировано в текущем проекте HTML5 на интерфейсе WindowTimers (что не означает, что он был реализован именно так). Там вы найдете примечание:

    Этот API не гарантирует, что таймеры будут работать точно по расписанию. Ожидаются задержки из-за загрузки процессора, других задач и т. Д.

    И, что еще более ясно:

    9) Возможно, подождите еще один пользовательский агент, определенный период времени.

    Примечание. Это предназначено для того, чтобы пользовательские агенты могли набирать тайм-ауты по мере необходимости, чтобы оптимизировать использование энергии устройством. Например, некоторые процессоры имеют режим с низким энергопотреблением, где уменьшается гранулярность таймеров; На таких платформах пользовательские агенты могут замедлять таймеры, чтобы соответствовать этому расписанию, вместо того, чтобы требовать от процессора использования более точного режима с его более высоким потреблением энергии.

    Вы также можете WindowAnimationTiming проект WindowAnimationTiming .

    И если вы используете setInterval / setTimeout в анимациях / часах / etc, всегда Date.now() действительно прошедшее время с помощью объектов Date (например, через Date.now() ).

    Некоторые браузеры не беспокоятся о том, чтобы срабатывать тайм-аут / интервальные события, если окно не сфокусировано. Когда окно восстанавливает фокус, оно запускает все сразу. Это решение для производительности (зачем запускать событие каждые миллисекунды, если пользователь даже не заметит?), И, насколько мне известно, нет способа изменить это поведение.

    JavaScript делает сайт умным, красочным и простым использованием.