Функция имитирует вращение барабана с постепенной остановкой

Условие

Функция имитирует вращение барабана с постепенной остановкой

• используй onRoll для анимации вращения (смена текущего значения на барабане)
• и onStop для оповещения, когда барабан закончил крутиться пример runSpinner( () => setValue(v => ++v % 10), () => console.log('finished') )

Ответ

Запускайте смену значения таймерами с постепенно растущей задержкой, а после последнего шага вызывайте onStop ровно один раз.

Пример с фиксированными 20 шагами и возможностью отмены:

function runSpinner(onRoll, onStop) {
  let step = 0, timer, cancelled = false;
  function tick() {
    if (cancelled) return;
    onRoll();
    if (cancelled) return;
    if (++step === 20) {
      onStop();
      return;
    }
    timer = setTimeout(tick, 40 + step * 15);
  }
  timer = setTimeout(tick, 40);
  return () => { cancelled = true; clearTimeout(timer); };
}

При отмене onStop не вызывается. Callback-функции предполагаются синхронными и не бросающими ошибок. Таймеры задают минимальную задержку, а не точную частоту кадров.