Один таймер vs много таймеров - дайте совет

[Linel]

Здраствуйте.

Встала такая задача:

Есть большой массив объектов, которые следует отобразить на canvas. Объекты постоянно движутся с разной скоростью.

Отображать буду с помощью requestAnimationFrame(), вызывая метод draw(), который будет брать текущие координаты объекта и по каким-то правилам его рисовать в данных координатах.

Возникла задача менять координаты всех объектов с наименьшими проблемами с перфомансом.

Первая идея была такая:

Ну, окей есть у нас объект. Он движется. Запускаем таймер, который раз в n миллисикунд меняет кординаты

setInterval(move, n)

где вункция move() что-то делает с координатами раз в n миллисекунд.

Проблема в том, что объектов может быть много, например, 200.
И изменение координат некоторых объектов должно происходить быстро. В итоге получаю 200 таймеров, которые раз, с кажем, 20 миллисекунд производят расчеты.

Возникла другая идея.
Сделать один глобальный таймер, который обнавляется, скажем, раз в 5 миллисекунд. И у каждого объекта раз в эти 5 миллисекунд высчитывать новые координаты на основе скорости этого объекта.

Оправдывает ли себя такой подход или же больщой разницы с перформансом не будет?

[Naive]

Вот начал с верной мысли, а дальше что-то намудрил)
requestAnimationFrame() это и есть таймер, зачем тебе другие?
Тебе лишь нужно будет отслеживать тайм-штамп и в зависимости от задержки отображения высчитывать все нужные координаты для каждого отдельно взятого движущегося объекта. Обычная инкапсуляция.
Однако обычный холст может тормозить со всей этой радостью. Возможно стоит глянуть в сторону webGL.

[Arigato]

Сообщение от Linel

Сделать один глобальный таймер, который обнавляется, скажем, раз в 5 миллисекунд.

Очень сомневаюсь, что такой интервал сработает.

[Naive]

Сообщение от Arigato

Очень сомневаюсь, что такой интервал сработает.

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

[Arigato]

То есть если в такой таймер поставить команду tick++, то через 10 секунд tick==5000?

[Naive]

Сообщение от Arigato

То есть если в такой таймер поставить команду tick++, то через 10 секунд tick==5000?

Нет, точно нет. JS — асинхронный язык, все, что выкладывается на "отсрочку", т.е. таймер, или интервал, или фреймсет; выкладывается в асинхронную очередь.
То есть если ты запустил таймер, скажем с алертом таймштампа на 5мс, а после него закинул вычисление факториала от 1000, то асинхронный код подождет своей очереди.
Бонус:

var a = function() {requestAnimationFrame(function(){console.log(Date.now()); a()});} a();

*выводит таймштамп в консоль сразу после отрисовки страницы браузером.
Попробуй этот код на простой странице, типа этого форума и на тяжкой, типа примеров webGL.

[Arigato]

Я спрашивал не про загруженность, а на пустой странице даст он тебе tick==5000 или нет? И если нет, то на сколько он будет меньше.

[Fenex]

Сообщение от Arigato

Я спрашивал не про загруженность, а на пустой странице даст он тебе tick==5000 или нет? И если нет, то на сколько он будет меньше.

Сильно зависит от машины же. Более того, чем тяжелее будет функция (в плане вычислений), тем выше будет разброс времени выполнения функции даже на одной и той же странице.

У себя проверил код - давало 495 (для 2 сек) и около 2470 (для 10 сек) на странице ya.ru.

var count = 0;
var timer = setInterval(function() {
    count++;
}, 2);
setTimeout(function() {
    clearInterval(timer);
    console.log(count);
}, 2000);

Время 2 мс - очень маленькое, смысла в таких задержках нет никакого. Каждый раз таймаут складывает в очередь выполнения код, чтобы этих копий не накапливалось и они не вызывались сразу друг за другом партиями, был создан механизм защиты от вызова одной и той же функции без таймаута (если предыдущая копия функции ещё не обработана, она уничтожается из очереди). В данном случае скорее всего так и есть - javascript только тем и занимался, что добавлял и убирал из очереди выполнения функцию (утрирую, конечно же).

[Arigato]

Вот такой код, тестирую на пустой странице:

function start(){
	var tick=0;
	var startTime=Date.now();
	var timer=setInterval(function(){tick++}, 2);
	setTimeout(function(){
		var waiting=Date.now()-startTime;
		clearInterval(timer);
		alert(waiting+' - '+tick+' - '+Math.ceil(waiting/tick));
	}, 2000);
}

Результаты для разных браузеров (реальное время до остановки таймера - количество тиков - реальное значение интервала):
Firefox: 2002 - 392 - 6
Opera: 2000 - 409 - 5
Chrome: 2001 - 412 - 5
Safari: 2002 - 410 - 5
Maxthon: 2001 - 416 - 5
Нигде интервал 2 не получается.

[Naive]

Сообщение от Arigato

Нигде интервал 2 не получается.

У меня мб просто комп мощнее)

Maxthon: 2001 - 416 - 5

А вот это уже странно, он же на движке Тридент? у них вроде была минималка на задержку 20мс...
Какая версия?