Javascript 在用户重新单击按钮之前等待

我有两个按钮，一个是“向上箭头”，另一个是“向下箭头”。如果单击“向下箭头”按钮，页面将向下滚动到下一节，如果单击“向上箭头”按钮，页面将向上滚动到上一节，所有这些都是使用库“jump.js”创建的

问题是，每当用户多次单击任一按钮时，动画就会中断。我想做的是，当用户单击一个按钮时，他应该等到动画完成（1-2秒），然后才能重新单击它

下面是代码，实际上是onClick事件：

  // on click event
  const onArrowClick = direction => {
    //if user clicked on arrow up button
    if (direction === 'go-up') {
      //animation to next section
      jumpTo(images[currentIndex - 1]);
      setCurrentIndex(currentIndex - 1);
      //if user clicked on arrow down button
    } else if (direction === 'go-down') {
      //animation to next section
      jumpTo(images[currentIndex + 1]);
      setCurrentIndex(currentIndex + 1);
    }
  };
  //jump to an element
  const jumpTo = image => {
    jump(image);
  };

• 将箭头单击上的

  更改为同时接受
  $event
  和
  direction
  例如：
  
  const onArrowClick = (event, direction) => {
  .....
  <button onClick={(e) => onArrowClick(e, 'go-up')}>GO-UP</button>
  
  

---

多亏了@KGSSandaruan宝贵的提示，我才找到了解决方案！ 这是：

   const [loading, setLoading] = useState(false);
  //onclick
  const onArrowClick =  direction => {
    setLoading(true);
    //if user clicked on arrow up button
    if (direction === 'go-up') {
      setTimeout(() => setLoading(false), 1000);
      //animation to next section
      if (currentIndex > 0) {
        setCurrentIndex(currentIndex - 1);
        jumpTo(images[currentIndex - 1]);
        setCurrentImage(images[currentIndex - 1]);
      } else {
        setCurrentIndex(0);
      }
      //if user clicked on arrow down button
    } else if (direction === 'go-down') {
      setTimeout(() => setLoading(false), 1000);
      //animation to next section
      if (currentIndex < 6) {
        setCurrentImage(images[currentIndex + 1]);
        jumpTo(images[currentIndex + 1]);
        setCurrentIndex(currentIndex + 1);
      } else {
        setCurrentIndex(6);
      }
    }
    getData(currentIndex + 1);
  };
....
<button disabled={loading}></button>

const[loading，setLoading]=useState（false）；
//onclick
const onArrowClick=方向=>{
设置加载（真）；
//如果用户单击了向上箭头按钮
如果（方向==‘向上’）{
setTimeout（（）=>setLoading（false），1000）；
//动画转到下一节
如果（当前索引>0）{
setCurrentIndex（currentIndex-1）；
跳转到（图像[currentIndex-1]）；
setCurrentImage（图像[currentIndex-1]）；
}否则{
setCurrentIndex（0）；
}
//如果用户单击向下箭头按钮
}否则，如果（方向==‘向下’）{
setTimeout（（）=>setLoading（false），1000）；
//动画转到下一节
如果（当前索引<6）{
setCurrentImage（图像[currentIndex+1]）；
跳转到（图像[currentIndex+1]）；
setCurrentIndex（currentIndex+1）；
}否则{
setCurrentIndex（6）；
}
}
getData（currentIndex+1）；
};
....

您是否想过在用户单击其中一个按钮后禁用这些按钮？当然，您可以在执行

setCurrentIndex

之后启用它。您是否尝试使用按钮_name？@Avanthika是的，但不幸的是，它似乎不起作用…@KGSSandaruwan您应该在disabled={？？}和状态变量（比如加载）之间设置什么。您可以将其设置为true，并在两秒钟后相应地设置为false。正如我提到的，在JSX中加载变量（button_name）。但是，在我试过之后，当你垃圾邮件按钮时，它就一直在运行。不过我还是很感激你的宝贵帮助！

   const [loading, setLoading] = useState(false);
  //onclick
  const onArrowClick =  direction => {
    setLoading(true);
    //if user clicked on arrow up button
    if (direction === 'go-up') {
      setTimeout(() => setLoading(false), 1000);
      //animation to next section
      if (currentIndex > 0) {
        setCurrentIndex(currentIndex - 1);
        jumpTo(images[currentIndex - 1]);
        setCurrentImage(images[currentIndex - 1]);
      } else {
        setCurrentIndex(0);
      }
      //if user clicked on arrow down button
    } else if (direction === 'go-down') {
      setTimeout(() => setLoading(false), 1000);
      //animation to next section
      if (currentIndex < 6) {
        setCurrentImage(images[currentIndex + 1]);
        jumpTo(images[currentIndex + 1]);
        setCurrentIndex(currentIndex + 1);
      } else {
        setCurrentIndex(6);
      }
    }
    getData(currentIndex + 1);
  };
....
<button disabled={loading}></button>