Jquery 中止AJAX post

我的设置如下（为清晰起见简化）：

所以我想要的是，当用户第一次单击fb_方法按钮时，它将请求一个AJAX。但是如果他们突然改变主意并单击其他方法，我想中止之前的AJAX请求

我通过Firebug跟踪它，它返回一个错误，即xhr未定义。如果我将注释1中的xhr移到if语句之前，它可以工作，但AJAX请求仍在处理中。我的意思是在Firebug中，当我单击FB方法，然后单击其他方法时，它显示如下：

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

---

但是请求一直在加载。

当单击事件发生时，您的xhr变量在调用的函数中是局部变量

调用abort方法时，

xhr

不是post方法使用的变量

xhr变量需要位于绑定到click事件的函数的外部，否则在检查其他click事件时它将是未定义的

此外，由于可能需要多个xhr变量来存储不同的post，因此应该创建一个数组或对象来存储不同的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;
});

var xhr=[]；
$（'.methods a'）。单击（函数（）{
//对锚做一些全局性的操作，例如：更改背景颜色等
//设置目标容器
var target=$（this.attr（'href'）；
//如果用户单击fb_方法按钮
if（$（this）.hasClass（'fb_方法'））{
//执行ajax请求（将post句柄添加到xhr数组）
push（$.post（“/ajax/get\u fb\u albums.php”），函数（msg）{
$（target.html（“”）.append（msg.fadeIn（）；
}) );
}否则{
//中止所有ajax请求
对于（变量x=0；x

当单击事件发生时，您的xhr变量在调用的函数中是本地变量

调用abort方法时，

xhr

不是post方法使用的变量

xhr变量需要位于绑定到click事件的函数的外部，否则在检查其他click事件时它将是未定义的

此外，由于可能需要多个xhr变量来存储不同的post，因此应该创建一个数组或对象来存储不同的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;
});

var xhr=[]；
$（'.methods a'）。单击（函数（）{
//对锚做一些全局性的操作，例如：更改背景颜色等
//设置目标容器
var target=$（this.attr（'href'）；
//如果用户单击fb_方法按钮
if（$（this）.hasClass（'fb_方法'））{
//执行ajax请求（将post句柄添加到xhr数组）
push（$.post（“/ajax/get\u fb\u albums.php”），函数（msg）{
$（target.html（“”）.append（msg.fadeIn（）；
}) );
}否则{
//中止所有ajax请求
对于（变量x=0；x

也许您需要将xhr声明为全局变量可能您需要将xhr声明为全局变量是否还需要清除数组，或者在中止请求对象后它是否会存储这些对象？是否还需要清除数组，或者在中止请求对象后它是否会存储这些对象？

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