Estoy haciendo los controles de video que pueden mostrarse u ocultarse.
La función de los controles de video desaparecerá después de 3 segundos.
Pero cuando ejecuta setTimeout varias veces, no desaparece en 3 segundos.
Quiero hacerlo desaparecer en 3 segundos incluso ejecutado varias veces.

mi código es:

 const [showVideoControls, setShowVideoControls] = useState(false); const [secondCall, setSecondCall] = useState(false); let timeoutID; function setUpVideoControls() { if (!showVideoControls) { setShowVideoControls(true); } else { setShowVideoControls(false); } } function offVideoControls() { return new Promise(resolve => { resolve(setSecondCall(true)); }); } function callUnified() { if (secondCall) { return new Promise(resolve => { resolve(unified()); }); } } function tmp() { return new Promise(resolve => { resolve(unified2()); }); } function unified() { clearTimeout(timeoutID); setSecondCall(false); } function unified2() { timeoutID = setTimeout(function () { setShowVideoControls(false); }, 3000); } async function callingFirstTime() { await tmp(); await offVideoControls(); } async function callingAfterSecondTime() { await callUnified(); } ... <View style={{ width: '100%', height: '100%' }}> <TouchableWithoutFeedback onPress={() => { if (secondCall) { callingAfterSecondTime(); } setUpVideoControls(); callingFirstTime(); }}> <Text style={{ flex: 1, }}> {''} </Text> </TouchableWithoutFeedback> </View>

La función de Mi código es:

①ejecutar setTimeout
②clearTimeout (se debe cancelar el setTimeout anterior)
③ejecutar setTimeout

Creo que mi código está bien, pero no funciona bien.
¿Cómo puedo arreglar eso?
Cualquier consejo que pueda dar sería muy apreciado.