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 を無視してください - これは私の作業中のドラフトです)。

つまり、購読フォームを開く電子メールサインアップボタンがあります。このフォームは最初に表示されますが、setTimeout 関数によって 3000 間隔後に閉じられ、ユーザーが email-signup-button.png 画像をクリックするとコールバックされます。クリックで呼び出された後、3000 以降は自動的に非表示になりません。

私が必要とするのは、ビューアが電子メール入力フィールド内をクリックした場合にsetTimeout関数を停止することは可能ですか? 彼は何かを入力し始める必要はありませんが、内部をクリックするだけです。彼がメールアドレスを入力することに決めた場合、フォームを閉じたくありません。誰かがサイトにアクセスしてすぐに自分のメールアドレスを書きに行くことはまずありませんが、私はしたいと思います。この可能性を排除します。

4

4 に答える 4

52

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);
});
于 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 に答える