[JavaScript]猿でもわかるクロージャ超入門　６　クロージャの応用例「注文ボタン」

2012/02/26

クロージャは何の役に立つのか？

前回の記事で、クロージャは「状態を保持する関数」であると書きました。
これを応用すると、いろいろ便利なことができます。

jQueryとクロージャは相性バツグン

jQueryを使った経験があれば、誰でも下記のようなコードを書いたことがあるのではないでしょうか？

$('#btn').click(function(){
  alert('hello');
});

ここで、clickメソッドに渡されているのは無名関数function(){...}です。
そう、無名関数と言えばクロージャの出番です！

クロージャの応用例：２回目にクリックすると警告が出るボタン

ショッピングカートの「注文する」ボタンで、２重クリックすると２回決済されてしまうというサイトをたまに見かけます。
jQuery + クロージャを使うことで、これを防止してみましょう。

HTML

<form name="frm" id="frm">
  <input type="submit"   value="注文する" />
</form>

Javascript

$(function(){

    var isClicked = false;

    $('#frm').submit(function(){
        if (isClicked) {
            alert('すでにクリック済みです。');
            return false;
        }

        isClicked = true;
    });

});

デモ

↓２回クリックすると、２回目に警告が出ます。

クラスを作るより手軽なので、jQuery+クロージャの組み合わせはとってもおすすめです。
ぜひいろんな場面で使ってみてください！

これで、あなたはクロージャ入門を卒業しました。
最後まで読んでくれてありがとう。
おつかれさまですた。

カテゴリ: jQuery JavaScript