Javascript 单击按钮时中断for循环（wiht状态）

我有一个

循环

来播放声音。我想在单击按钮时将其打断。不确定我是否面临异步、重新加载的问题。。。但它不起作用。有什么想法吗

const onStart  = async () => {
    
    for (const el of playlist) {

      if (breakLoop) {
        break;
      }
      
      await play(el);

      
      if (breakLoop) {
        break;
      }
      
    }
}
      
const onStop  = () => {

    setBreakLoop((prev) => true);
    
}

---

我没有足够的上下文来给出准确的答案，但如果我考虑类似的情况，我会这样做：

//一个play函数，用于模拟需要一些时间的内容
常量播放=（el）=>新承诺（解析=>{
console.log（“播放：”，el）
return setTimeout（解析，1000）
})
//虚拟播放列表
const playlist=Array（10）.fill（0）.map（（（u，i）=>i）；
//用于编排所有内容的设置函数
函数设置（）{
设breakLoop=false；
返回{
异步onPlay（）{
breakLoop=false；
用于（播放列表的常数）{
if（断开循环）{
打破
}
等待播放（el）；
}
},
顶部（）{
console.log（“停止”）
breakLoop=true；
},
};
}
//并在初始化后使用它们
让{onPlay，onStop}=setup（）；
onPlay（）
//onPlay有时间播放后停止（通常从“单击”事件处理程序调用）
setTimeout（onStop，3000）

Thx，但它对我不起作用。

onStop

中的

breakLoop=true

对循环无效。如果它对我有效，请使用交互式代码段重试，以更清楚地了解我的方法。不确定为什么它对我无效。我在单击按钮（在React中）时执行的函数中使用了

onPlay（）

和

onStop（）

<在

onPlay（）

级别，code>onStop不会更改

breakLoop

。除此之外，我还观察到，如果我使用状态变量，它会触发重新渲染器，并重新执行

setup（）

函数。我应该把它放在

useffect

中吗？