jQuery stop setTimeout if user clicks in input fie

Question

I have the following jQuery functions:

   <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>

And I also have the following form:

<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="[e-mail]" 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>

Finally, there is a "button" (an image) which opens a form. That button has this code:

<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>

(please ignore inline CSS - this is my working draft).

In other words, I have an E-mail sign up button which opens subscribe form. This form is initially shown, but it is closed after 3000 interval by the setTimeout function, and called back if a user clicks email-signup-button.png image. After it is called back with a click, it will no longer autohide after 3000.

What I would need is: is it possible to stop setTimeout function if a viewer clicks inside the email input field? He doesn't have to start typing anything, but simply if he clicks inside. I don't want the form to close if he decides to put e-mail address in. Although it is unlikely that someone will immediately go to write hers/his e-mail inside as soon as they visit the site, I would like to eliminate this possibility.

Answer 1

I am a little slow cause I made http://jsfiddle.net/2tdL9/ but everyone is correct clearTimeout() is the answer

Answer 2

Change your ShowHide() function to be like this:

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

and the onclick handler of your input email to be like this:

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

that should do want you want.

Answer 3

You can use

var timer=setTimeout(...);

And when you want to stop it, use

clearTimeout(timer);

Answer 4

You need to capture the id of the setTimeout and clear it:

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

The implementation of this would look something like this:

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

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