是否可以阻止计时器结束

Question

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

这就是我得到的：

const [cameraLabelVisible, setCameraLabelVisible] = useState(false);    
let labelTimer;
function labelVisible() {
setCameraLabelVisible(true);
labelTimer = setTimeout(() => {
setCameraLabelVisible(false);
clearTimeout(labelTimer);
}, 1500);
}
};

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

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

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);
}

Answer 2

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

是的，这可以通过清除现有超时并创建新的超时来实现。这可以通过以下方式实现：

const [cameraLabelVisible, setCameraLabelVisible] = useState(false);    
let labelTimer;
function labelVisible() {
if(labelTimer) {
clearTimeout(labelTimer);
}    
setCameraLabelVisible(true);
labelTimer = setTimeout(() => {
setCameraLabelVisible(false);
clearTimeout(labelTimer);
}, 1500);
}
};

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

这听起来与您上面提出的问题不同。如果我理解正确，下面的内容将允许您在1.5秒内多次单击该按钮，并且标签在清除之前只显示该时间。

const [cameraLabelVisible, setCameraLabelVisible] = useState(false);    
let labelTimer = undefined;
function labelVisible() {
setCameraLabelVisible(true);
if(!labelTimer) {    
labelTimer = setTimeout(() => {
setCameraLabelVisible(false);
labelTimer = undefined;
}, 1500);
}
};