DZHAMBULAT-SAMOUCHKA
@DZHAMBULAT-SAMOUCHKA
Frontend разработчик

Почему рулетка не крутиться?

Здраствуйте! Я очень долго сидел и пыхтел чтобы создать код из песочницы. Сделать одну прокрутку для рулетки раз плюнуть, но чтобы сделать 2 или больше прокруток подряд уже пришлось поднапрячься. Но это пока не работает. Проблема в том что состояние не меняется для проммиса который ждет что состояние targetIndex будет равен состоянию viewTargetIndex. Но они остаются такими же какими были и при запуске этого промисса. Проблемный код находиться чуть ниже console.log(2.1). Я так понимаю они не меняются потому что функция multiSpins которая содержит этот промисс рендерится с предыдущим состоянием. Я не могу понять как добиться этого.

Работа рулетки основана на библиотеке Swiper. Пролистывание рулетки основано на модуле autoplay библиотеки Swiper

Принцип работы:
  1. Пользователь нажимает на кнопку
  2. Состояние isSpin обновляется из-за чего запускается код в useEffect
  3. В useEffect при условии что isSpin true запускается функция multiSpins
    1. В multiSpins запускается рулетка с помощью swiper.ref.autoplay.start()
    2. Объявляются переменные spinsQnt и currentWin.Для чего они описано комментариями в песочнице.
    3. Создается промисс который меняет состояние targetIndex и завершается при окончании таймера.
    4. После завершения первого промисса по цепочке then запускается второй промисс.
      1. Запускается интервал который будет длиться до тех пор пока состояние targetIndex не будет равен viewTargetIndex
      2. Если условие в интервале истинно, то интервал очищается а состояния targetIndex и viewTargetIndex сбрасываются
      3. После сброса состояний промисс завершается


    5. После завершения второго промисса по цепочке then запускается фрагмент кода
      1. spinsQnt декрементируется
      2. После небольшой задержки если spinsQnt > 0 multiSpins снова запускается и так рекурсивно пока spinsQnt >
      3. Если spinsQnt <= 0 то прокрутк(а/и) считаются завершенными и выполняется логика вывода призов.>
        0
  4. В свойствах Swiper есть свойство onSlideChange в котором мы проверяем является ли текущий индекс активного слайда равным targetIndex.
    1. Если условие истинно, то останавливаем прокрутку swiperRef.autoplay.stop()
    2. Затем заменяем состояние viewTargetIndex на targetIndex




Все основные точки работы рулетки пронумерованы и выведены в консоль для упрощения вникания
Самое лучшее что у меня получилось: ссылка на песочницу: https://codesandbox.io/p/sandbox/roulette-wf4wlg
  • Вопрос задан
  • 34 просмотра
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы