我有一个for循环播放声音。我想在单击按钮时打破它。我不确定我是否面临异步、重新渲染的问题……但它不起作用。有任何想法吗？
const onStart = async() => {
for (const el of playlist) {
if (breakLoop) {
break;
}
await play(el);
if (breakLoop) {
break;
}
}
}
const onStop = () => {
setBreakLoop((prev) => true);
}
我没有足够的上下文来给出确切的答案，但是如果我要考虑类似的情况，我会这样处理：
// a play function to simulate something that takes some time
const play = (el) => new Promise(resolve => {
console.log("playing:", el)
return setTimeout(resolve, 1000)
})
// a dummy playlist
const playlist = Array(10).fill(0).map((_, i) => i);
// a setup function to orchestrate everything
function setup() {
let breakLoop = false;
return {
async onPlay() {
breakLoop = false;
for (const el of playlist) {
if (breakLoop) {
break;
}
await play(el);
}
},
onStop() {
console.log("stopping")
breakLoop = true;
},
};
}
// and use them after initialization
let { onPlay, onStop } = setup();
onPlay()
// stop after onPlay had some time to play (would normally be called from your "click" event handler)
setTimeout(onStop, 3000)