Почему зацикливается анимация?

Question

[TheSnegok]

const block = document.querySelector('.block');
let counter = 0;
let a = false;

function anim() {
  counter++;
  block.style.transform = `translateX(${counter}px)`;
  
  if (counter < 200) {
    a = requestAnimationFrame(anim);
  }
}

requestAnimationFrame(anim);

Почему идёт каждый раз вызов функции anim, a = requestAnimationFrame(anim) знак присваивания получается присваивает и вызывает?
В чём отличие от присваивания a = requestAnimationFrame(anim) и от обычного вызова requestAnimationFrame(anim)?

Answer 1

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

В чём отличие от присваивания a = requestAnimationFrame(anim) и от обычного вызова requestAnimationFrame(anim)?

только в том, что сохранили значение, которое возвращает вызов. Для этой функции это значение некий уникальный id, по которому, при необходимости, можно отменить вызов через cancelAnimationFrame(), но в приведённом коде это значение никак не используется.

Почему идёт каждый раз вызов функции anim()

Первый раз потому, что в конце кода стоит вызов requestAnimationFrame(). Последующие — потому, что в конце очередной отработки anim() есть вызов a = requestAnimationFrame(anim); при условии, что счётчик не превышен.