こんな時、ないですか？
- ボタン実行から、処理が完了するまで2度押しを防ぎたい。
- ダブルクリックや複数回のクリックで余計な処理を走らせたくない。
こういったボタン連打・２度押しには、色々な対策が施されていますが、実際テストではちょこちょこと想定外の動作が見つかっているのが現状かと思います。
皆さんは、ボタン連打の防止にどんなコード使っていますか？？
- 今回 lodash に使えそうな機能を見つけたので、皆さんのご意見を伺えればと思い投稿します！
- 皆さんも、もし有効なボタン連打防止策ありましたら教えてください
ボタン連打を防止できる便利な関数
-
lodash.js (Undesrscore.js)
- lodashはユーティリティ関数を集めたライブラリです。
- あんまり詳しくですが、軽量で便利な関数が揃っているとのこと。
- ボタン連打防止に使用した関数は、このlodashの中のthrottle関数を使用しました。
_.throttle(func, [wait=0], [options])
- throttle関数を用いることで、実行されてから
wait[ms]立つまで次の処理を待機させることができます。 - しかし、オプションを指定しない状態では
待機してしまいます。 - つまり、wait[ms]時間経過後にするするーっと次の処理が走り出します。。
- そこで、1ボタンを確実に1度しか動作をさせたくないという場合には、trailing(後続処理)のオプションを明示的に定義する必要があります。
_.throttle(func, [wait=0], {trailing: false})
- これで、wait時間待機中に実行された後続処理が破棄されます。
実際のボタンクリックの対策例
$('#id').on('click', _.throttle( function () {
// １度のみ実行させたい処理
hogehoge();
}, 1000, {trailing: false});
コメントやここ違います等ありましたらお気軽にコメントお願いします。
