如果用户单击输入字段，jQuery停止setTimeout [英] jQuery stop setTimeout if user clicks in input field

问题描述

我有以下jQuery函数:

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>

我也有以下形式:

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

(请忽略内联CSS-这是我的工作草案).

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

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

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.

我需要的是:如果查看者在电子邮件输入字段中单击，是否可以停止setTimeout函数?他不必开始输入任何内容，而只需单击内部即可.如果他决定输入电子邮件地址，我不希望该表格关闭.尽管不太可能有人在访问该网站后立即去写他/他的电子邮件，但我想消除这种可能性.

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.

推荐答案

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

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

这篇关于如果用户单击输入字段，jQuery停止setTimeout的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！