Эффективное использование requestAnimationFrame () [закрыто] ⇐ Javascript

[Anonymous]

У меня есть сотни элементов списка, которые будут анимироваться одновременно в обновлениях списка. Самый простой способ его реализовать - использовать функцию, которую я уже готов: < /p>

Код: Выделить всё

export function moveElement(el: HTMLElement, options: {
toLeft?: string | undefined;
toTop?: string | undefined;
durationMs?: number | undefined;
fromLeft?: string | undefined;
fromTop?: string | undefined;
signal?: AbortSignal | undefined;
runInAnimationFrame?: boolean | undefined;
}): Promise {
if (runInAnimationFrame) {
return runInAnimationFrame(() => {
moveElementIntern(el, options);
})
} else {
return moveElementIntern(el, options);
}
}
< /code>
moveElementIntern()

использует RuninAnimationFrame в конечном итоге несколько раз в зависимости от параметров:

Код: Выделить всё

export function runInAnimationFrame(cb: (ms: number) => void, signal?: AbortSignal): Promise {

return new Promise((res, rej) => {
function wrappedCb(ms: number) {
try {
cb(ms);
res();
} catch (reason) {
rej(reason);
} finally {
signal?.removeEventListener('abort', onAbort);
}
}
const id = requestAnimationFrame(wrappedCb);

function onAbort() {
assert(signal?.aborted);
cancelAnimationFrame(id);
signal.removeEventListener('abort', onAbort);
rej(signal.reason);
}

signal?.addEventListener('abort', onAbort);

})

}
< /code>
Now, as I imagine for example 500 calls to moveElement

parallelly, я думаю о том, будет ли более эффективно заменить сотни вызовов для перемещения , которые создают, например, 2 вызовы для запроса анимации только одним вызовом к новой функции

Код: Выделить всё

function moveElements(tasks: {el: HTMLElement, options: { ... }}[]) { ... }
< /code>
This would mean that requestAnimationFrame is only called about 2 times instead of about 1000 times. But there would be much more logic needed in moveElements

Чтобы сгруппировать действия для всех элементов. Честно говоря, я забочусь только о Firefox, Chrome, Safari и его мобильных вариантах. Было бы очень признателен!

Подробнее здесь: https://stackoverflow.com/questions/797 ... ationframe