お世話になります。
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へ登録する処理... }); }
is_bookmark_clickableをtrueにセットしなおす必要はあるんでしょうか?
ブックマークアイコンを押下した際にAjaxでDBへ登録・削除とカウント数表示を行いたい(現在のブックマーク数にプラスorマイナス1)のですが、
そのままだとchromeなどで連打した場合にカウント数がおかしくなるため、
setTimeoutで300ミリ秒後にtrueにして、再度押せるようにしています。
最初はAjaxのコールバック関数内でカウントさせていたんですが、
通信遅延でクリックしてからカウントされるまでが遅かったため、コールバックとは切り離しました。
すみません、頂いた回答でもなぜtrueに戻すかがわからないですが。。
つまり、300ms以降はもう一度クリック出来て、カウントアップ出来るという事ですよね?
//カウント処理 というところのif文を丸ごと取っ払うと、普通に動くと思いますが、いかがでしょうか
回答2件
あなたの回答
tips
プレビュー