Как правильно в функциональном компоненте React остановить for await цикл?

Question

Мне нужно тормозить выполнение цикла по внешней переменной (код ниже, упростил его, ошибок нет)

Но если я меняю переменную во время цикла, цикл все равно не останавливается и доходит до конца.

const status = {
  status: false,
  play: function () {
    this.status = true 
  }
  stop: function () {
    this.status = false
  }
}

const play = async () => {
  status.play()
  for await (let [i, e] of appState.project.entries()) {
    if (status.status) {
      'few async calls'
    } else {
    break
    }
  }
}


<button onClick={()=>{status.stop()}>STOP</button>

Answer 1

Получилось тормозить цикл вот таким вот способом - обернув объект со статусом и функциями в useCallback. Теперь если цикл запущен и вызвать text.stop - цикл отсанавливается

const text = useCallback(
    {
      playStatus: false,
      stop: function () {
        this.playStatus = false
        console.log(this.playStatus)
      },
      play: async function () {
        this.playStatus = true
        for await (let [i, e] of appState.project.entries()) {
          if (this.playStatus) {
            setPlayingElem({ blob: e.blob, index: i })
            let duration = await getBlobDuration(e.blob)
            audioRef.current.play()
            await delay(duration)
          } else {
            break
          }
        }
        setPlayingElem(false)
      }
    },
    [appState]
  )

БЛОГ НА HUSL

Как правильно в функциональном компоненте React остановить for await цикл?

Ответы (1 шт):