$快速连续点击会覆盖这个

时间:2013-09-07 16:43:46

标签: javascript jquery ajax

我有一系列带有锚点的div标签,点击后,向下滑动一个用AJAX填充的面板。代码看起来像这样:

        $('.details').click(function(e) {

            $this = $(this).parents('.container');
            var id = $this.data('id');

            $(this).slideToggle('slow', function() {
                if ($(this).is(":visible")) {
                    $.ajax({ 
                        type: 'POST', 
                        url: '/method', 
                        data: { id: id }, 
                        timeout: 5000
                    }).done(function(result){

                        console.log('Done was fired.');
                        console.log($this);

                        // This is my headache:
                        // Using $this here to do some stuff

                    }).fail(function(jqXHR, textStatus, errorThrown){
                        console.log('Fail was fired.');
                        console.log(jqXHR, textStatus, errorThrown);
                    });

如果我快速点击两个链接,第一个开始,然后在它完成之前,第二个开始,覆盖这一行:$this = $(this).parents('.container');,这最终给人的印象是ajax永远不会完成。如何确保我能够访问正确的$this?我应该继续查询DOM,还是使用某种变量,变量名?

2 个答案:

答案 0 :(得分:3)

因为它是一个全局变量!

    $('.details').click(function(e) {

        $this = $(this).parents('.container');
    ^^^    
   No var

添加var以使其具有本地范围,而不会被覆盖

    $('.details').click(function(e) {

        var $this = $(this).parents('.container');
        ^^^    

答案 1 :(得分:1)

在函数中使$this成为局部变量,而不是页面中的全局变量:

var $this = $(this).parents('.container');

通过在函数中本地声明变量,对函数的每次调用都会获得自己的变量。当AJAX调用的回调函数使用变量时,它使用闭包中捕获的局部变量作为回调函数,而不是全局变量。