jQuery stop setTimeout if user clicks in input field

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="[email protected]" 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.

You can use delay method instead of setTimeout and stop method for stopping the animation. — Ram
– Ram, Commented Sep 17, 2012 at 22:54

weexpectedTHIS · Accepted Answer · 2012-09-17 23:37:39Z

53

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

edited Sep 17, 2012 at 23:37

answered Sep 17, 2012 at 22:56

weexpectedTHIS

3,3861 gold badge27 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Oriol Over a year ago

You should NEVER call setTimeout with an string as the argument! That uses the devil eval()! Instead, your code should be setTimeout(function(){alert("hi");}, 3000)

weexpectedTHIS Over a year ago

Ideally yes, but I was just writing it out quickly.

Bruno Kos Over a year ago

Would it be a problem if you update my function with the solution you are giving here? I am new to jQuery (although I managed to compile these functions only via other answers here on stackoverflow), so I am not sure how to edit my function with the solution you are proposing.

Bruno Kos Over a year ago

Yes, that's it. It stops my function if I click inside.

Oriol · Accepted Answer · 2012-09-17 22:56:31Z

3

You can use

var timer=setTimeout(...);

And when you want to stop it, use

clearTimeout(timer);

answered Sep 17, 2012 at 22:56

Oriol

291k71 gold badges459 silver badges535 bronze badges

Comments

Nelson Benítez León · Accepted Answer · 2012-09-17 23:05:09Z

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.

answered Sep 17, 2012 at 23:05

Nelson Benítez León

51k8 gold badges70 silver badges84 bronze badges

Collectives™ on Stack Overflow

jQuery stop setTimeout if user clicks in input field

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related