JQuery stop setTimeout, если пользователь нажимает в поле ввода

У меня есть следующие функции 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>

И у меня также есть следующий вид:

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

Наконец, существует "button" (изображение), которое открывает форму. Эта кнопка имеет этот код:

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

(пожалуйста, игнорируйте встроенный CSS - это мой рабочий проект).

Другими словами, у меня есть кнопка регистрации электронной почты, которая открывает форму подписки. Эта форма изначально показана, но она закрывается после 3000 интервалов функцией setTimeout и вызывается назад, если пользователь нажимает на значок электронной почты-button.png. После того, как он будет вызван щелчком, он больше не будет скрывать после 3000.

Мне нужно: возможно ли остановить функцию setTimeout, если зритель щелкнет внутри поля ввода электронной почты? Ему не нужно начинать вводить что-либо, но просто, если он нажимает внутри. Я не хочу, чтобы форма закрывалась, если он решил разместить адрес электронной почты. Хотя маловероятно, что кто-то сразу отправится писать ее/его электронную почту внутри, как только они посещают сайт, я бы хотел устранить эту возможность.

Ответ 1

Вам нужно записать идентификатор setTimeout и очистить его:

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

Реализация этого будет выглядеть примерно так:

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

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

Ответ 2

Вы можете использовать

var timer=setTimeout(...);

И если вы хотите остановить его, используйте

clearTimeout(timer);

Ответ 3

Я немного медленный, потому что я сделал http://jsfiddle.net/2tdL9/, но все верно. clearTimeout() - это ответ

Ответ 4

Измените функцию ShowHide() так:

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

и обработчик onclick вашего входного сообщения электронной почты:

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

который должен делать то, что вы хотите.