ELAB.

jQueryを使った文字数カウントとthrottle/debounce

2012.12.9

はじめまして、こんにちは。
軽めのjQuery Advent Calendar 2012の9日目の記事です。

今回はよくある文字数カウントをjQueryで実装してみるのと、便利(?)なプラグインの紹介。

初記事ですので、どうぞお手柔らかにお願いさせていただきたく。(ちなみに現時点ではこれ以外にページはありません!)

文字数カウントの実装

早速ですが、こんな感じでHTMLとJSを書いていきます。
textareaに入力された文字数をdiv#result要素の中に表示していく流れですね。

HTML

<textarea></textarea>
<div id="result">0</div>

JavaScript

$(function(){
  var cnt;

  // キー入力が発生する度に実行
  $('textarea').on('keyup', function(){

    // テキストエリアのvalueから文字列の長さを取得して、
    cnt = $(this).val().length;

    // 文字数を表示
    $('#result').text(cnt);
  });
});

キー入力のイベントはkeyupで取るのが一般的だと思います。同様に使えるイベントでinputkeypressなどありますが、微妙に挙動とタイミングが違うので気をつけてください。

無駄な処理を省く → throttle/debounceを使う

さて、この作り方だと、キーを1つ打つ度に処理が走るのですが、文字数カウントぐらいであれば頻繁に走らせる必要もない場合がありますよね。
さらに、流行りのスマートフォンで且つ、一緒にDOM操作などを走らせると、パフォーマンスも気になるところなので、、適当に間引いていくようにしてみます。

というわけで、下記のプラグインを使ってみましょう。
http://benalman.com/projects/jquery-throttle-debounce-plugin/

// function(){...} の代わりに下記のように記述する。
$.throttle( delay, function(){...} );
$.debounce( delay, function(){...} );

これを使うことで、delayに指定した時間(ms)毎に間引いて実行してくれるようになります。
$.throttleはキー入力中、delayが経つ度に実行、
$.debounceはキー入力中には発火せず、入力後delayが経つと実行されます。

何のこっちゃ?という方は上記URLに図解で分かりやすく書かれているので、是非そちらを。

試してみよう

実際に試してみた方がさらに分かりやすいので、サンプル置いてみました。
文字数と実行回数を比較すると挙動がつかめると思います。(delayは200ms)

通常 >> 0文字 / 0
$.throttleを使用 >> 0文字 / 0
$.debounceを使用 >> 0文字 / 0

今回は入力イベントに対してでしたが、scrolltouchmoveあたりで使うのもいいでしょう。(むしろこっちの方が役に立つ)

以上でした。