【jQuery】クリックイベント内でsetTimeoutで遅延実行する際のthisがうまく働かない

要約

1. $.proxy(function, context)を使う
2. contextにthisと書いて対象オブジェクトを引き継ぐ
3. setTimeout($.proxy(function(){実行したいこと},this), 1000)
4. $object = thisを記述した方がわかりやすいのは自分だけ？

setTimeoutを使うとthisはそのままだと使用できない

エラーになるバージョン

    $('.unselected').click(function() {
        setTimeout(function(){
            $(this).removeClass('unselected');
        },1000);
    });

エラー回避バージョン

    $('.unselected').click(function() {
        setTimeout($.proxy(function(){
            $(this).removeClass('unselected');
        } ,this),1000);
    });

$.proxyでthisのとなるオブジェクトを引数として渡す

$.proxy(function, context)
function: 対象となる関数
context: functionの中でthisとなるオブジェクト

$.proxy(function(){}, this);
とすれば、直前のオブジェクトをthisで$.proxyの中のfunctionにthisとしたいオブジェクト渡すことができる。

オブジェクトを別の変数で受け取ってから渡してもいい

    $('.unselected').click(function() {
        // 遅延実行したい対象のオブジェクト
        $object = this; 
        // 対象のオブジェクトを$.proxyの第二引数に引き継いで上げる
        setTimeout($.proxy(function(){
            $(this).removeClass('unselected');
        } ,$object),1000);
    });

これでクリックされたものだけイベントが発生するようになる。