Подскажите, как правильно организовать анимацию на js?
Мне нужно анимировать переход цвета в течении ровно 2500мс со скоростью 60fps
Почему в данном случае console.log() выполняется то за 3000мс то за 2700?
Тыкинте мордой, как сделать предсказуемое время выполнения?
var time = 2500;
var interval = setInterval(function() {
if(step < time) {
var percentage = step / time;
percentage = percentage > 1 ? 1 : percentage;
var color = blendColors(fromColor, toColor, percentage);
makeAnimation(color);
step += 1000 / 60;
} else {
var e = new Date();
console.log((e.getTime() - s.getTime()) / 1000);
clearInterval(interval);
}
}, 1000 / 60);
setInterval не гарантирует выполнение коллбэка четко через заданный промежуток времени. Так как setInterval работает асинхронно, это значит, что переданный в него коллбэк прежде чем выполниться, проходит через так называемую очередь макро-тасков, обработкой которой занимается event loop, механизм, отвечающий за событийный цикл в браузере. Проще говоря, если ты хочешь запустить некоторую функцию с интервалом, скажем, в 1 секунду, у тебя нет никаких гарантий на то, что эта функция будет выполняться с интервалом именно в 1 секунду. Если спустя одну секунду в очереди макротасков обнаружатся еще не обработанные задачи, то коллбэку интервала придется ждать, пока event loop не обработает их все и не дойдет до него. К тому же может возникнуть такая ситуация, когда медленный код стопорит основной поток. В этом случае коллбэки интервала начнут копиться в очереди и затем будут обработаны по одному на каждую итерацию событийного цикла, то есть временной промежуток между срабатыванием функций будет отличаться от указанного
