質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

2回答

5609閲覧

javascriptでの連打防止

kimrion

総合スコア24

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2016/08/16 08:30

お世話になります。
twitterなどによくあるブックマーク機能を下記のように実装したのですが、
IE11で確認したところ、連打するとブックマーク数のカウントがおかしくなってしまいます。
(カウントが+2されてしまったり)
setTimeoutを使って連打できないように制御しているのですが、効いていないようです。
他に何か方法があれば教えていただけると幸いです。
よろしくお願いいたします。

var is_bookmark_clickable = true; $('.js-animate-bookmark').on('click',function(e){ if( is_bookmark_clickable ) { // 連続クリック制御フラグ is_bookmark_clickable = false; var $target = $(this); var $countTarget = $target.prev('.js-bookmark-count-target'); // カウント数が表示されているDOM var count = parseInt($countTarget.text(), 10); // カウント数を取得 // カウント処理 if ( $target.hasClass('fa-bookmark') ) { if(count > 0){ $countTarget.text(count - 1); } setTimeout(function(){ is_bookmark_clickable = true; }, 300); } else { $countTarget.text(count + 1); setTimeout(function(){ is_bookmark_clickable = true; }, 300); } // Ajax $.ajax({ // ブックマークをDBへ登録する処理... }); }

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kunai

2016/08/16 08:37

is_bookmark_clickableをtrueにセットしなおす必要はあるんでしょうか?
kimrion

2016/08/16 08:59 編集

ブックマークアイコンを押下した際にAjaxでDBへ登録・削除とカウント数表示を行いたい(現在のブックマーク数にプラスorマイナス1)のですが、 そのままだとchromeなどで連打した場合にカウント数がおかしくなるため、 setTimeoutで300ミリ秒後にtrueにして、再度押せるようにしています。 最初はAjaxのコールバック関数内でカウントさせていたんですが、 通信遅延でクリックしてからカウントされるまでが遅かったため、コールバックとは切り離しました。
kunai

2016/08/16 09:17

すみません、頂いた回答でもなぜtrueに戻すかがわからないですが。。 つまり、300ms以降はもう一度クリック出来て、カウントアップ出来るという事ですよね? //カウント処理 というところのif文を丸ごと取っ払うと、普通に動くと思いますが、いかがでしょうか
guest

回答2

0

自己解決

IEの場合だけsetTimeoutの秒数を多くし、解決しました。

投稿2016/08/19 16:55

kimrion

総合スコア24

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

そもそもブックマーク機能を連打するという運用シーンがイメージ出来ないのですが…

対症療法的な措置になりますが、そもそもボタンを一度クリックされたらdisableにしてしまうのはいかがでしょうか?
パッと思いつくのは、setTimeoutと他の条件(画面スクロールなど)をトリガーにenableに出来るようにするとかです。

他に良い方法があると思いますが、今すぐは思いつかないです。

投稿2016/08/19 16:49

nomura

総合スコア116

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問