Javascript 我应该如何向该旋转木马添加用户可以干预的自动滚动？

我正在开发一个文本框的“幻灯片”，目前可以使用箭头按钮滚动。我希望幻灯片自动滚动，直到用户单击其中一个箭头按钮进行干预

以下是React组件中的相关状态逻辑（我将其定义为函数，而不是类）：

箭头将使用

setSlide

功能设置当前幻灯片。我认为最好通过使用

setTimeout

注册对

nextSlide

的调用来处理自动滚动

这个很好用

setTimeout

调用

nextSlide

，

nextSlide

导致重新渲染，然后导致注册新的

nextSlide

，并按预期继续。问题是我不知道如何处理“用户干预”方面

我的第一个想法是向组件状态添加一个

干预

布尔值，当用户单击箭头时，该状态被设置为

true

，然后让

nextSlide

仅在该布尔值设置为false时执行其逻辑。尝试此操作后，似乎在

setTimeout

中注册的

nextSlide

调用有其自己的单独状态实例，因为即使单击箭头，布尔值始终为

false

---

我这样做不对吗？有更好的方法吗？

使用以下代码完成任务。键是

useRef

：

const intervention = useRef(false)

setInterval(() => {
  if (!intervention.current) {
    nextSlide();
  }
}, 8000);

const intervention = useRef(false)

setInterval(() => {
  if (!intervention.current) {
    nextSlide();
  }
}, 8000);