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'
        );
    }
});