прервать запись AJAX

Question

Моя настройка выглядит так (упрощено для ясности):

<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, прежде чем добавлять его в контейнер содержимого в содержимом.

Так что мой jQuery такой:

$('.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. Но если они вдруг передумают и нажмут другие методы, я хочу прервать предыдущий запрос AJAX.

Я отследил его через Firebug, и он возвращает ошибку, что XHR не определен. если я переместил xhr в NOTE 1 перед оператором if, он работает, но запрос AJAX все еще обрабатывается. Я имею в виду, что в Firebug я щелкаю по методу FB, а затем по другим методам, он отображает что-то вроде этого:

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

Но запрос продолжает загружаться.

Answer 1

Ваша переменная xhr является локальной в функции, вызываемой при возникновении события click.

При вызове метода abort xhr не является переменной, используемой для метода post.

Переменная xhr должна быть внешней по отношению к функции, связанной с событием click, иначе она будет неопределенной при проверке ее на наличие других событий click.

Кроме того, поскольку вам, вероятно, потребуется более одной переменной 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;
});