Как повторно вызвать requestAnimationFrame?

Question

[Maks]

Допустим, есть такой код:

requestAnimationFrame(function measure(time) {
    alert();
})

И где-то есть кнопка, по нажатию на которую функция вызывает данный код.
Все работает отлично. Несколько раз нажимаю на кнопку - несколько раз вылетает alert.

Но если сделать небольшую замену:

requestAnimationFrame( measure = function(time) {
    alert();
})

то при многократном нажатии на кнопку функция сработает только один раз.

Я попробовал вынести функцию отдельно и вызвать ее через call:
requestAnimationFrame( measure.call() )
выходит ошибка: The callback provided as parameter 1 is not a function

Вопрос: если мне нужна именно запись вида measure = function(time), как переписать так, чтобы функция срабатывала многократно?

P.S. Полный код, брал с сайта javascript.ru. В нем описанная проблема на третьей строке с функцией animate:

function animate(options) {
  var start = performance.now();
  requestAnimationFrame( function animate(time) {
    var timeFraction = (time - start) / options.duration;
    if (timeFraction > 1) timeFraction = 1;
    var progress = options.timing(timeFraction)
    options.draw(progress);

    if (timeFraction < 1) {
      requestAnimationFrame(animate);
    }

  });
}

P.P.S. самый полный код на JSFiddle: https://jsfiddle.net/bafxwmdf/ (проблема на девятой строке)

Answer 1

[wittyrider]

Как повторно вызвать requestAnimationFrame?

// Запустит цикл
let drawId = requestAnimationFrame(time => {
    // do something
    requestAnimationFrame(time)
})

// остановит цикл
cancelAnimationFrame(drawId)

Допустим, есть такой код:

Не надо использовать requestAnimationFrame для такой задачи.

P.S. Полный код, брал с сайта javascript.ru.

У вас лишная функция.

function animate(options) {
  var start = performance.now();
  var timeFraction = (time - start) / options.duration;
  if (timeFraction > 1) timeFraction = 1;
  var progress = options.timing(timeFraction)
  options.draw(progress);
  if (timeFraction < 1) {
    requestAnimationFrame(animate);
  }
}

Comments

[Maks]

При такой записи у меня галп вылетает с кучей ошибок. В посте привел полный код с местом проблемы.

[Maks]

т.е. все работает отлично, но когда меняю определение функции - работает только один раз

[wittyrider]

Maks: обновил ответ

[Maks]

wittyrider: без этой функции код не срабатывает даже один раз.

[wittyrider]

Maks:
1. Где обявлено переменные timeFraction и time?
2. Где и какими аргументами вызываете функцию animate?

[Maks]

wittyrider: переписал полностью код на jsfiddle: https://jsfiddle.net/bafxwmdf/

[wittyrider]

Maks: https://jsfiddle.net/bafxwmdf/1/

[wittyrider]

Maks: сори отпечатка вот рабочое https://jsfiddle.net/bafxwmdf/2/

[Maks]

wittyrider: Спасибо за решение! Все наконец-то заработало