みなさんこんにちは、現役エンジニアのサメハックです
未経験からWebエンジニアに転職し、
正社員として5年働いたのちフリーランスとして独立しました。
JavaScriptの解説シリーズです。
今回は連打防止処理の作り方について学んでいきましょう！
駆け出しエンジニアや未経験の方、
また新入社員を指導する先輩社員にとっても
わかりやすいように解説していきます！
この記事を読むと・・・
- 連打防止処理が作成できる
連打防止処理をつくろう！
連打防止するために必要となる処理は以下の3つです。
- HTMLで自身の要素をクリックイベントに渡す
- JavaScriptでクリックイベントを受け取る
- 要素のdisabled属性をtrueとし、操作不可能とする
- 一定時間経過後、disabled属性をfalseに戻し操作可能とする
HTMLで自身の要素を渡す構文
<button onclick="関数名(this)"></button>
引数にthisを渡すことで、自身の要素をわたせるよ！
動作確認
See the Pen
連打防止 by same-hack (@same-hack)
on CodePen.
/**disabledを解除するまでの時間※ミリ秒 */
const TIMER = 3000;
const btnDisabled = (element) => {
console.log("要素をdisabledにします");
// ボタン要素を取得
const btn = document.getElementById(element.id);
// ボタンにdisabled属性を付与して操作不可とする
btn.disabled = true;
// 指定した時間が経過したら処理を実行
setTimeout(() => {
console.log("disabledを解除します");
// disabled属性をfalseにして活性状態に戻す
btn.disabled = false;
}, TIMER);
};
JavaScriptはこのようになっています。
実際にボタンを押していただくとわかると思いますが
ボタンを押すと要素が非活性状態になり、
3秒経過すると活性状態に戻ります。
非活性状態ではクリックイベントを受け付けないので連打の影響を受けなくなるよ！
まとめ
- 要素のdisabled属性を一定時間trueとすることで、連打防止機能となる
満足いただけたら、1クリックなのでSNSフォローしてもらえると嬉しいです🦈
