javascript - 是否可以防止计时器结束？

Question

我试图在用户单击按钮时显示标签。我尝试使用 setTimeout 来实现这一点，但是当您在超时结束之前多次单击该按钮时，这将无法正常工作。

这就是我得到的：

const [cameraLabelVisible, setCameraLabelVisible] = useState(false);    
let labelTimer;

function labelVisible() {
   setCameraLabelVisible(true);
   labelTimer = setTimeout(() => {
      setCameraLabelVisible(false);
         clearTimeout(labelTimer);
      }, 1500);
   }
};

我的问题是：是否可以通过在计时器结束前单击相同的按钮将计时器重置为初始值（在本例中为 1500）？

如果在时间用完之前多次单击按钮，我想显示标签。

标签： javascriptreactjsreact-native

Answer 1

您可以先清除现有计时器：

const [cameraLabelVisible, setCameraLabelVisible] = useState(false);
let labelTimer;

function labelVisible() {
    setCameraLabelVisible(true);

    // clear the timer if there's another timer running
    if(labelTimer) clearTimeout(labelTimer);

    labelTimer = setTimeout(() => {
        setCameraLabelVisible(false);
    }, 1500);
}