Buenas:

Estoy tratando de construir una botonera en JS, pero no quiero que se muestre sin estar seguro de que el usuario quiere hacerlo.
Para eso, pongo un setTimeout de unos 300ms o 500ms en forma de tiempo de seguridad. Y algo parecido pero con algo más de tiempo para cerrar la botonera. Bueno aquí ya surge el primer problema. Cuando pasa el ratón sobre la botonera, esta espera el tiempo indicado y se activa, a pesar de que uso la función clearTimeout en el mouseleave. Lo mismo pasa cuando dejo el tiempo de seguridad para que la botonera no se cierre demasiado pronto si el usuario quiere volver a ella. El caso es que tiene unsetTimeout "automático" al cargar la página y este si que me permite detenerlo con el primer mouseenter. Este es el código:

function timeOut() {
     
     $('#botonera').animate({height:20}, "normal");
    $("#btn1").slideUp(700);
    $("#btn2").slideUp(700);
    $("#btn3").slideUp(700);
    $("#btn4").slideUp(700);

 };
var wait = setTimeout(timeOut, 3000);

function timeOut1() {
   
    $("#botonera").animate({height:40}, "fast");
    $("#btn1").slideDown(300);
    $("#btn2").slideDown(300);
    $("#btn3").slideDown(300);
    $("#btn4").slideDown(300);

 };

function mostrar() {
    
     $("i").show();

 };

function ocultar() {
    
     $("i").hide();

 };

$('#botonera').mouseenter( function() {
    
     clearTimeout(wait); 
    var wait1 = setTimeout(timeOut1, 500);
    var esp1 = setTimeout(ocultar, 100);

 });
$('#botonera').mouseleave( function() {
    
     clearTimeout(wait1); 
    var wait = setTimeout(timeOut, 3000);
    var esp = setTimeout(mostrar, 3700);

 });

He probado varias opciones, como por ejemplo hover y mouseover/mouseout, pero ninguna detiene el setTimeout. Si alguien sabe de qué forma podría conseguir lo que busco....
Soy bastante novato y suelo inventarme todo mi código, por lo que seguro que está lleno de errores de principiante... ¡¡Sé que escribo más de la cuenta!! jajaja

Gracias y un saludo!

Cuando haces: var wait = setTimeout(timeOut, 3000); estás creando un objeto (es más que una variable), y ese objeto queda activo hasta que lo eliminas con clearTimeout(wait); o cierras la página.

En ese código veo varias sentencias parecidas (varios objetos), intenta manejarte con sólo uno (o el mínimo para evitar embrollarte), o -como alternativa- puedes incluir otras variables (tipo de estado).

Vale, creo que lo he entendido. Por ejemplo, en este caso, ¿puedo usar un solo objeto para todos los setTimeout?:

var btn;
btn = setTimeout(abrir, 1000);
btn = setTimeout(cerrar, 1500);
btn = setTimeout(etc, 1000);

¿Y no me daría problemas a la hora de hacer el clearTimeout? Teóricamente, si lo "limpia" justo antes de iniciar el siguiente no debería fallar, ¿no? ¡A ponerlo en practica se ha dicho!

Gracias y un saludo!