如何在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

将自定义执行上下文传递给回调方法的Use $.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'
        );
    }
});