クロージャをクリックイベント内で使いたい。

Question

<div class="table_case">
  <div class="table table1"></div>
  <div class="table table2"></div>
  <div class="table table3"></div>
</div>

var clickLog=[];

$(document).on('click','.table',function(){
    var click=$(this);
    clickLog.push( click );
    LogLen=Log.length;
    if( LogLen>1 ){
        if( clickLog[ (LogLen-2) ] === clickLog[ (LogLen-1) ] ){
            console.log('一致');
        }else{
            console.log('不一致');
        }
    }
});

tableをクリックした際にclickLogにどのtableをクリックしたかを追加していき、一回前にクリックしたtableと今クリックしたtableが同じものであるかを判別するために上記のコードを作りました。
上記のコードで実現したい動作は得られるのですが、グローバルスコープに変数を定義しているのでクロージャを使いたいと思っているのですが、やり方がわからずに困っております。

クロージャについては調べたのですが、思い通りの動作ができなかったので、試しに、参考にさせていただいたサイトのコードを実行してみました。
すると、グローバルスコープでクロージャのdemoコードを実行すると説明通りクロージャの動作をするのですが、クリックイベント内で同じコード実行するとうまく機能しませんでした。
クリックイベント内では違う挙動をするものなのでしょうか？
以下は参考にさせていただいたクロージャのコードです。

var createTimer = function () {
        var time = 10;
 
        return function timeDown() {
            time -= 1;
            console.log(time);
        };
    };
 
//グローバル変数にセットされたことで、クロージャになる
var timer = createTimer();
timer(); // 「9」
timer(); // 「8」
timer(); // 「7」

上記のコードを試しにクリックイベント内に記述すると、

$(document).on('click','.table',function(){
var createTimer = function () {
        var time = 10;
 
        return function timeDown() {
            time -= 1;
            console.log(time);
        };
    };
 
var timer = createTimer();
timer(); // 「9」

});

となりました。
イメージではクリックするごとにtimeが9,8,7となっていくと思っていたので、クロージャはクリックイベント内では、違うのかなと思い調べてみたのですが、よくわからず困っております。
グローバルスコープに変数を定義せずにクロージャを使って「実現したい挙動にする方法」をわかる方がいらっしゃいましたらご教授いただければ幸いです。

Answer 1

イメージではクリックするごとにtimeが9,8,7となっていく

そうなっています

Comments

[knight1220]

お早い返信ありがとうございます。
返信が遅くなってしまい大変申し訳ございません。
最後のコードに誤りがありましたので修正しました。
クリックイベント内にあるときにクリックするごとに9,8,7となっていくようにしたいと思っているのですが、今のままでは、クリックするごとに9→クリック→9→クリック→9…となってしまうということが説明したかったのですが、説明が下手くそで申し訳ございません。