17

我有以下 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 - 这是我的工作草案）。

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

我需要的是：如果查看者在电子邮件输入字段内单击，是否可以停止 setTimeout 函数？他不必开始输入任何内容，只要他在里面点击即可。如果他决定输入电子邮件地址，我不希望表单关闭。虽然不太可能有人在访问该站点后立即去里面写她/他的电子邮件，但我想消除这种可能性。

4

4 回答 4

52

您需要捕获 idsetTimeout并将其清除：

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);
});
于 2012-09-17T22:56:41.463 回答
3

您可以使用

var timer=setTimeout(...);

当你想停止它时，使用

clearTimeout(timer);
于 2012-09-17T22:56:31.060 回答
3

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

于 2012-09-17T23:04:52.300 回答
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 = ''; }"

那应该是你想要的。

于 2012-09-17T23:05:09.003 回答