【jQuery】ボタン連打の対策をする(処理中は追加処理をキャンセルする)

  • はてブ

「やめて!そのボタンは連打しないで!」

そのつらい気持ち、よくわかります。
今回はフラグを立てて、ボタン連打の対策をやってみましょう。

jQuery

<処理のルート>
cancelFlag という変数を定義しておき、値が「0」の場合は処理開始、「1」の場合は処理キャンセル、という判定を追加するだけです。意外とシンプル。


上記の例だと、クリックイベントが着火した直後に cancelFlag に「1」を代入、フラグを立てます。
そして処理が終了する際に「0」を代入し、フラグをおろす。これでフラグが立っている間はクリックを連打しても処理が重複しません。
今回はsetTImeoutを使用して時間経過で切り替わるようにしていますが、お好みで書き換えてください。

▼デモも作成しました。



処理中(cancelFlagが1の時)にボタンをクリックすると、「処理中です」とアラートが表示されるようになっています。

森島

執筆者: 森島

8bit デザイナーです。 コーディング・jQueryなど幅広く担当しています。

株式会社8bit (エイトビット)

東京都渋谷区でWebサイト制作、Webシステム開発などを行っております。
キャンペーンサイトやWebサービスの企画・提案を得意としており、自社での経験を元にアイデアをカタチにするお手伝いをさせていただいております。

制作に関するご相談はお気軽にどうぞ

コンペ参加や相談ベースでもご相談承っております。

お問い合わせ