jQuery zatrzymać setTimeout jeśli użytkownik kliknie w polu wejściowym

Question

Mam następujące funkcje 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> 

i mam również następującą postać:

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

Wreszcie istnieje "przycisk" (obraz), który otwiera formularz. Ten przycisk ma ten kod:

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

(proszę zignorować wbudowany CSS - to jest mój szkic roboczy).

Innymi słowy, mam przycisk rejestracji e-mail, który otwiera formularz subskrypcji. Ta forma jest początkowo pokazana, ale jest zamykana po 3000 razach przez funkcję setTimeout i oddzwaniana, gdy użytkownik kliknie obraz e-mail-signup-button.png. Po ponownym wywołaniu za pomocą kliknięcia, po 3000 nie będzie ona automatycznie rejestrowana.

Potrzebne jest: czy można zatrzymać funkcję setTimeout, jeśli użytkownik kliknie w polu wprowadzania wiadomości e-mail? Nie musi zaczynać pisania, ale po prostu, jeśli kliknie w środku. Nie chcę, aby formularz został zamknięty, jeśli zdecyduje się na wpisanie adresu e-mail. Chociaż jest mało prawdopodobne, że ktoś od razu przejdzie do pisania swojego e-maila, gdy tylko wejdzie na stronę, chciałbym wyeliminuj tę możliwość.

Answer 1

Trzeba uchwycić id setTimeout i wyczyścić go:

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

Implementacja tego będzie wyglądać mniej więcej tak:

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

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

Answer 2

Można użyć

var timer=setTimeout(...); 

A kiedy chcesz go zatrzymać, należy

clearTimeout(timer); 

Answer 3

jestem trochę powolny przyczyną zrobiłem http://jsfiddle.net/2tdL9/ ale każdy jest poprawny clearTimeout() jest odpowiedzią

Answer 4

Zmień swoją funkcję ShowHide() być tak:

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

i obsługi z onclick Twój wejściowy adres e-mail będzie taki:

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

który powinien t chcesz.