Тело функции не выполняется, если не передано непосредственно в requestAnimationFrame

Question

Первоначально у меня было это:

requestAnimationFrame(appendItemsFragment(itemsFragment, appendItemsFragmentCallback));

Но мне нужно было сделать что-то большее, поэтому я преобразовал его в

requestAnimationFrame(() => {
  appendItemsFragment(itemsFragment, appendItemsFragmentCallback);
  myNewFunctioncall();
});

Исходная функция определяется как:

const appendItemsFragment = (itemsFragment, callback) => () => {
  itemsContent.appendChild(itemsFragment);
  destroySpinner();
  if (callback) {
    callback();
  }
};

Но в модифицированной версии requestAnimationFrame функция appendItemsFragment не выполняется (я поставил alert () и он не работает, я нажимаю F10 два раза и он возвращается к концу requestAnimationFrame ). Почему это?

Answer 1

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

requestAnimationFrame(() => {
  appendItemsFragment(itemsFragment, appendItemsFragmentCallback)();
  myNewFunctioncall();
});

Однако, это вызовет appendItemsFragment() для каждого отображаемого кадра, что будет многократно добавлять фрагмент элемента, что, вероятно, не то, что вам нужно. Вам нужно вызвать его один раз, сохранить результат, а затем вызвать его в функции-обертке.

let callback = appendItemsFragment(itemsFragment, appendItemsFragmentCallback);
requestAnimationFrame(() => {
  callback();
  myNewFunctioncall();
});