我应该如何向这个旋转木马添加一个可以由用户干预的自动滚动

Question

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

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

// Maintain a variable of the currently selected slide
const [slide, setSlide] = useState(0);
// Go to the next slide
function nextSlide() {
if (slide == companies.length - 1) {
setSlide(0);
} else {
setSlide(slide + 1)
}
}

箭头将使用setSlide功能设置当前幻灯片。我认为最好通过使用setTimeout注册对nextSlide的调用来处理自动滚动。

这很好用。setTimeout调用nextSlide，nextSlide导致重新渲染，然后导致注册新的nextSlide，并按预期进行。问题是我不知道如何处理"；用户干预"；方面

我的第一个想法是向组件状态添加一个intervention布尔值，当用户单击箭头时，该状态将设置为true，然后让nextSlide仅在该布尔值设置为false时执行其逻辑。尝试过之后，在setTimeout中注册的nextSlide调用似乎有自己独立的状态实例，因为布尔值始终是false，即使在我单击箭头之后也是如此。

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

Answer 1

使用以下代码完成任务。密钥是useRef:

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