専用のフラグを用意し、通信中は新たなAjax処理が発生しないようにif文で弾けばOK(厳密には「連打」そのものを防ぐわけではない)。
Ajax処理が終了した後は.always()の中でフラグをもとに戻すのを忘れずに。
Ajax通信中のボタン連打を防ぐ方法
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
$(function(){ var canAjax = true; $('.hoge').on('click', function() { // Ajax処理中は新たな処理をスタートしない if(!canAjax) { console.log('通信中'); return; } canAjax = false; // これからAjaxを使うので、新たなAjax処理が発生しないようにする // Ajax $.ajax({ type:'POST', url:'https://example.com/hoge', dataType: 'json', }).done(function (results){ // 成功時 }).fail(function(jqXHR, textStatus, errorThrown){ // 失敗時 }).always(function() { // 成否に関わらず実行 canAjax = true; // 再びAjaxできるようにする }); }); }); |
コメントを残す