jquery - このポインタをJQのAJAXヘルパー関数に適切に渡す方法は?

Question

いくつかのリンクがあり、クリックするとサーバーにデータが送信されます。答えは 3 ～ 5 秒で返ってくるので、その間は現在クリックされているリンクをブロックする必要があります。応答があるまでクリックすることはできません。

私のコードは次のようになります:

jQuery('#some-div').find('.some-links').click(function(){
    jQuery.post(
        ajax_url,
        values,
        function(response) {
            // Here i need to use element, which i clicked above
        },
        'JSON'
    );
});

Answer 1

$.proxyを使用してカスタム実行コンテキストをコールバック メソッドに渡します

jQuery('#some-div').find('.some-links').click(function(){
    jQuery.post(
        ajax_url,
        values,
        $.proxy(function(response) {
            // `this` points to the element
            // Here i need to use element, which i clicked above
        }, this),
        'JSON'
    );
});

クロージャー変数を使用する

jQuery('#some-div').find('.some-links').click(function(){
    var $this = $(this);
    jQuery.post(
        ajax_url,
        values,
        $.proxy(function(response) {
            // `$this` points to the element
            // Here i need to use element, which i clicked above
        }, this),
        'JSON'
    );
});

Answer 2

次のように、クリックするリンクごとに一意の変数を設定できます。

jQuery('#some-div').find('.some-links').click(function(){
    if($(this).data('post-pending')){
        return;
    }
    $(this).data('post-pending', true);

    var that = this;
    jQuery.post(
        ajax_url,
        values,
        function(response) {
            // Here i need to use element, which i clicked above
            $(that).data('post-pending', false);
        },
        'JSON'
    );
});

Answer 3

このソリューションでは、.data()関数を使用して、要素が現在使用されているか、自由に使用できるかを示す小さなフラグを格納します。

jQuery('#some-div').find('.some-links').click(function(){
    var state = $(this).data('blocked');
    if (!blocked) {
        $(this).data('blocked',true);
        jQuery.post(
            ajax_url,
            values,
            function(response) {
                // Here i need to use element, which i clicked above
                $(this).data('blocked',false);
            },
            'JSON'
        );
    }
});