jQuery dejar de setTimeout si el usuario hace clic en el campo de entrada

Question

que tendrá las siguientes funciones jQuery:

<script type="text/javascript"> 
    $(function() { 
// setTimeout() function will be fired after page is loaded 
// it will wait for 5 sec. and then will fire 
// $("#successMessage").hide() function 
setTimeout(function() { 
    $("#subscribe-floating-box").animate({"height": "toggle"}, { duration: 300 }); 
}, 3000); 
}); 
</script> 

<script type="text/javascript"> 
    function ShowHide(){ 
    $("#subscribe-floating-box").animate({"height": "toggle"}, { duration: 300 }); 
} 
</script> 

y también tengo la siguiente forma:

<div id="subscribe-floating-box"> 
<form action="" method="post" accept-charset="utf-8" id="subscribe-blog"> 
<input type="text" name="email" style="width: 95%; padding: 1px 2px" value="someone@example.com" id="subscribe-field" onclick="if (this.value == 'Email Address') { this.value = ''; }" onblur="if (this.value == '') { this.value = 'Email Address'; }"> 
<input type="hidden" name="action" value="subscribe"> 
<input type="hidden" name="source" value="http://example.com"> 
<input type="hidden" name="redirect_fragment" value="blog_subscription-2"> 
<input type="submit" value="Subscribe" name="jetpack_subscriptions_widget"> 
</form> 
</div> 

Por último, hay un "botón" (una imagen) que abre una forma. Ese botón tiene este código:

<a href="#" title="" onClick="ShowHide(); return false;" class="cart-buttom"><img src="<?php echo get_template_directory_uri(); ?>/library/images/email-signup-button.png" style="position:relative; top:-146px;" /></a> 

(ignore el CSS en línea - este es mi borrador en funcionamiento).

En otras palabras, tengo un botón de registro de correo electrónico que abre el formulario de suscripción. Este formulario se muestra inicialmente, pero se cierra después del intervalo 3000 por la función setTimeout, y se devuelve cuando un usuario hace clic en la imagen email-signup-button.png. Después de volver a llamar con un clic, ya no se ocultará automáticamente después de 3000.

Lo que necesitaría es: ¿es posible detener la función setTimeout si un usuario hace clic dentro del campo de entrada de correo electrónico? No tiene que comenzar a escribir nada, sino simplemente si hace clic dentro. No deseo que se cierre el formulario si decide ingresar la dirección de correo electrónico. Aunque es poco probable que alguien vaya inmediatamente a escribir el suyo/su correo electrónico tan pronto como visite el sitio, me gustaría eliminar esta posibilidad

Answer 1

Es necesario capturar el id de la setTimeout y claro:

var id = setTimeout(function(){alert('hi');}, 3000); 
clearTimeout(id); 

La implementación de esto se vería así:

var timeoutId = setTimeout(function() { 
    $("#subscribe-floating-box").animate({"height": "toggle"}, { duration: 300 }); 
}, 3000); 

$('#subscribe-field').focus(function(){ 
    clearTimeout(timeoutId); 
}); 

Answer 2

Puede utilizar

var timer=setTimeout(...); 

Y cuando se quiere detenerlo, utilice

clearTimeout(timer); 

Answer 3

soy un poco lento causa hice http://jsfiddle.net/2tdL9/ pero todo el mundo es clearTimeout correcta() es la respuesta

Answer 4

Cambiar su función ShowHide() que ser así:

function ShowHide(){ 
    window.eto = setTimeout(function() { 
     $("#subscribe-floating-box").animate({"height": "toggle"}, { duration: 300 }); 
    }, 3000); 
} 

y el manejador onclick de su correo electrónico de entrada para ser así:

onclick="clearTimeout(window.eto);if (this.value == 'Email Address') { this.value = ''; }" 

que debe hacer wan t quieres