Help us understand the problem. What is going on with this article?

ボタン連打の防止について( _.throttle )

More than 1 year has passed since last update.

こんな時、ないですか?

  • ボタン実行から、処理が完了するまで2度押しを防ぎたい。
  • ダブルクリックや複数回のクリックで余計な処理を走らせたくない。

こういったボタン連打・2度押しには、色々な対策が施されていますが、実際テストではちょこちょこと想定外の動作が見つかっているのが現状かと思います。

皆さんは、ボタン連打の防止にどんなコード使っていますか??

  • 今回 lodash に使えそうな機能を見つけたので、皆さんのご意見を伺えればと思い投稿します!
  • 皆さんも、もし有効なボタン連打防止策ありましたら教えてください :bow_tone1:

ボタン連打を防止できる便利な関数

  • 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 () {
    // 1度のみ実行させたい処理
    hogehoge();
}, 1000, {trailing: false});

コメントやここ違います等ありましたらお気軽にコメントお願いします。 :bow:

gizumon
エンジニア経験まだまだ少ないため、 基本的な内容から不足していることが多いです。 どしどし、フィードバック下さい!!
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away