Насколько эффективен данный код?

Question

[greenredero]

В программировании я новичок, заранее извиняюсь, если вопрос нубский.

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

let arr = ["abc", "defg", "hijkl", "mnopqr"];

const asyncForEach = async (array, callback) => {
  for (let index = array.length - 1; index >= 0; --index) {
    await callback(array[index], index, array)
  }
}

const waitFor = (ms) => new Promise(r => setTimeout(r, ms))

let doWork = (obj, innerMs, ms) => new Promise(r => setTimeout(async function () {
    for (let i = 0; i < obj.length; ++i) {
        console.log(obj[i]);
        await waitFor(innerMs);
    }
    console.log("=================");
    r();
}, ms))

const start = async () => {
    await asyncForEach(arr, async (string, index, array) => {
      await doWork(string, 250, 1000)
    })
    console.log('Done')
  }
  
start()

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

Answer 1

[Stalker_RED]

requestAnimationFrame()

window.requestAnimationFrame указывает браузеру на то, что вы хотите произвести анимацию, и просит его запланировать перерисовку на следующем кадре анимации. В качестве параметра метод получает функцию, которая будет вызвана перед перерисовкой.