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

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

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

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

jQueryを使った経験があれば、誰でも下記のようなコードを書いたことがあるのではないでしょうか?
$('#btn').click(function(){
  alert('hello');
});
ここで、clickメソッドに渡されているのは無名関数function(){...}です。
そう、無名関数と言えばクロージャの出番です!

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

ショッピングカートの「注文する」ボタンで、2重クリックすると2回決済されてしまうというサイトをたまに見かけます。
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;
    });

});
デモ

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


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

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

カテゴリ:

人気記事