Как сделать отрисовку с фиксированным fps?

Question

[Дмитрий]

Всем привет. У меня есть два канваса на которых я рисую графики с помощью Chart.js. Отрисовка в реальном времени т.е. обновляю графики по setInterval(). Появилась такая проблема: если данные для одно из графиков кончились, другой график начинает отрисовываться быстрее. Пробовал setInterval() заменить на requestAnimationFrame() - эффект такой же.

Answer 1

[Сергей Соколов]

с requestAnimationFrame вы же опираетесь на время, прошедшее с начала отсчёта, для того, чтобы рисовать что должно появиться по времени «сейчас», а не раньше или позже.
В примере тут есть.

Надо исходить не из того, что вызовы функции будут точно раз-в-X-ms – нет. Но будет известно точное время, прошедшее с некого начала отсчёта, который должен быть общим для обоих графиков.

По таймеру, например, вы делали

let x = 0;
const onTimerTick = () => {x = x + 1} // по 1 px за «кадр»

С requestAnimationFrame нужна функция от времени:

let start;
const step = (timestamp) => { // float время в ms с загрузки страницы
  if (!start) start = timestamp;
  const progress = timestamp - start;
  
  x = x + progress * 0.001; // надо как-то посчитать скорость в пикселях за миллисекунду

  if (progress < 2000) {
    window.requestAnimationFrame(step);
  }
}

Comments

[Дмитрий]

У меня один кадр - это индекс массива с массивом точек(x, y), который я просто прибавляю. т.е. arrFrames[frame++]. Как в такой случае лучше сделать привязку к времени?

[Сергей Соколов]

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