javascript setinterval не запускается синхронно с небольшими интервалами

Question

Допустим, есть функция x(), которая выполняет анимацию

Если я перебираю x(), скажем, 100 раз для его выполнения требуется <1 мс (в среднем / вызов) Однако, если ядо <code>setInterval(x, 100) требуется в среднем> 150 мсек для выполнения

Из-за этой причудливости моя анимация прерывистая.(Причиной моего теста для цикла было убедиться, что x() не является узким местом)

Существуют ли какие-либо методы / схемы, позволяющие запускать мой таймер (с небольшими интервалами) синхронно и с заданным интервалома не в зависимости от браузера?

Обновление: почему следующее дает разные результаты для разных интервалов
http://jsfiddle.net/zQQgH/7/

Обновление 2: благодаря lincolnk, я обновилкод для любого, чтобы проверить это http://jsfiddle.net/zQQgH/22/

Answer 1

Нет, вы не можете контролировать это действительно идеально.

Причина этого в том, что JavaScript является однопоточным и работает вместе с пользовательским интерфейсом браузера в одном потоке.Это означает, что если вы напишите setInterval (fn, 30).Вы просите браузер звонить через каждые 30 мс.Но браузер не будет делать это в это точное время.Браузер вместо этого добавит ваш запрос в очередь.

Вы можете найти больше информации об этом поведении здесь .

Но я не думаю, что это главная проблема, почему ваша анимация прерывистая. Чтобы получить плавную анимацию, вы должны использовать таймер от 16 до 35 мс.(Лучшее время анимации должно быть 16.6666667.)

Также есть возможность использовать RequestAnimationFrame (Этот пост в блоге также содержит дополнительную информацию о том, как использовать setInterval / setTimeout для анимации).Пол Айриш написал простой полифилл для RequestAnimationFrame .

Если у вас все еще есть проблемы, просто опубликуйте скрипт анимации с работающим HTML / CSS.Я могу посмотреть на это.

Answer 2

Я бы предложил использовать вместо этого setTimeout в вашем обратном вызове.