我的设置是这样的（简化为清楚起见）：

My setup is like this (simplified for clarity) :

<div class="methods">
    <a href="#a">Method 1</a>
    <a href="#b" class="fb_method">FB Method</a>
    <a href="#c">Method 3</a>
</div>

... <!-- contents -->

因此​​，每个方法，如果点击后，会褪色的在线内容，但主播有fb_method类，因为它需要追加到它的内容容器中的内容之前首先做一个AJAX请求。

So each method, if clicked, will fade in the inline contents, except anchor that has "fb_method" class, since it needs to do an AJAX request first before appending to its content container in the contents.

所以我的jQuery是这样的：

So my jQuery is like this :

$('.methods a').click(function(){
    // do something global to the anchors, eg : change the bg color, etc
    // set the target container
    var target = $(this).attr('href');
    var xhr;

    //if user clicks fb_method buttons
    if($(this).hasClass('fb_method')){
        //do ajax request - NOTE 1
        xhr = $.post("/ajax/get_fb_albums.php",function(msg){                           
            $(target).html('').append(msg).fadeIn();
        });
    }else{
        //abort all ajax request
        xhr.abort();
        $(target).fadeIn();
    }
    return false;
});

所以，我要的是当用户第一次点击fb_method按钮，它会要求一个AJAX。但是，如果他们突然改变主意，点击等方法，我想放弃了previous AJAX请求。

So what I want is when users first click fb_method button, it will request an AJAX. But if they suddenly change their mind and click other methods, I want to abort the previous AJAX request.

我通过Firebug的跟踪它，它正在返回未定义的XHR的错误。如果我的if语句之前移动注1：XHR，它的工作原理，但AJAX请求仍在处理中。我的意思是萤火虫，当我点击了FB方法，然后单击其他方法，它显示的是这样的：

I tracked it via Firebug and it returns an error of the xhr being undefined. if I moved the xhr in NOTE 1 before the if statement, it works but the AJAX request is still being processed. What I mean is in Firebug when I click the FB method then click other methods, it displayed something like this:

// ajax request xhr - keeps on loading
// ajax request xhr aborted

但要求不断加载。

But the request keeps on loading.

推荐答案

您XHR变量是本地调用的时候，点击事件发生在函数内部。

Your xhr variable is local inside the function called when the click event happens.

当你调用中止方法， XHR 不使用POST方法变量。

When you call the abort method, xhr is not the variable used for the post method.

在XHR变量需要外部绑定到click事件的功能，否则将是不确定的，当你检查它的其他点击活动。

The xhr variable needs to be external to the function binded to the click event, otherwise it will be undefined when you check it for other click events.

此外，因为您可能需要不止一个XHR变量不同的储存后，你应该创建一个数组或对象来存储不同的岗位。

Additionally, since you probably need more than one xhr variable to store different post, you should create an array or an object to store the different post.

var xhr = [];

$('.methods a').click(function(){
    // do something global to the anchors, eg : change the bg color, etc
    // set the target container
    var target = $(this).attr('href');

    //if user clicks fb_method buttons
    if($(this).hasClass('fb_method')){
        //do ajax request (add the post handle to the xhr array)
        xhr.push( $.post("/ajax/get_fb_albums.php", function(msg) {                           
            $(target).html('').append(msg).fadeIn();
        }) );
    }else{
        //abort ALL ajax request
        for ( var x = 0; x < xhr.length; x++ )
        {
            xhr[x].abort();
        }
        $(target).fadeIn();
    }
    return false;
});