如果用户在输入字段中单击,则jQuery停止setTimeout

时间:2012-09-17 22:48:31

标签: jquery input

我有以下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="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>

最后,还有一个打开表单的“按钮”(图像)。该按钮具有以下代码:

<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 - 这是我的工作草案)。

换句话说,我有一个电子邮件注册按钮,可以打开订阅表单。此表单最初显示,但是在setTimeout函数的3000个间隔后关闭,如果用户单击email-signup-button.png图像则回调。点击后回拨它后,它将不再在3000后自动隐藏。

我需要的是:如果观众在电子邮件输入字段内点击,是否可以停止setTimeout功能?他不必开始输入任何内容,只需点击内部即可。如果他决定将电子邮件地址放入,我不希望该表格关闭。虽然一旦有人在访问该网站时立即去写她/他的电子邮件,我不想消除这种可能性。

4 个答案:

答案 0 :(得分:47)

您需要捕获setTimeout的ID并清除它:

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

答案 1 :(得分:3)

您可以使用

var timer=setTimeout(...);

当你想要停止它时,请使用

clearTimeout(timer);

答案 2 :(得分:3)

我有点慢,因为我做了http://jsfiddle.net/2tdL9/但是每个人都是正确的clearTimeout()就是答案

答案 3 :(得分:2)

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 = ''; }"

这应该是你想要的。