Функция обратного вызова .ajaxStop выполняется несколько раз

Question

Я использую jQuery, но моя проблема в том, что моя переменная страницы увеличивается несколько раз, даже когда я использую "page + = 1" в функции обратного вызова .ajaxStop, потому что она выполняется более одного раза после первого разаэто используется.Я использую эту переменную в качестве параметра, передаваемого в Flickr API, чтобы получить определенную страницу данных.

Происходит следующее: при первом вызове этой функции функция обратного вызова выполняется один раз.Затем я вызываю ту же функцию с помощью кнопки «еще», чтобы получить следующий набор результатов, но в этот раз функция вызывается дважды, в следующий раз она вызывается трижды и т. Д. Это означает, что я могу получить страницу 1,2, 4, 7, 11 и т. Д. *

Функции AJAX, которые я вызываю, в основном представляют собой функцию .getJSON и некоторые дополнительные функции .getJSON, вызываемые в методе обратного вызова [inside getPhotos (id)]

// This gets the user ID from a given Flickr user page URL and does some presentation stuff
function getUserID() {
    $("#moreRow").hide(350);

    var usr = document.getElementById('user').value
    var Req_addr = 'http://api.flickr.com/services/rest/?method=flickr.urls.lookupUser&api_key=' + API_key + '&url=http%3A%2F%2Fflickr.com%2Fphotos%2F' + usr + json
    $.getJSON(Req_addr, function(data) {
        // Once the user is known, data about its photos is requested    
        getPhotos(data.user.id)
    });

    // This hides the user data panel    
    $("#userInfo").hide(0);

    // This hides the settings panel    
    $("#settings").hide(0, function() {
        $("#loader").slideDown(750);
    });    

    // This is what displays the photos when all of the AJAX requests have received their responses (ajaxStop)
    $("#photos").ajaxStop(function() {
        // the page counter is incremented for the next page to be requested next time
        page += 1

        // Add the data for the newly obtained photos to the table
        addPhotosToTable()
    });
}

Любой намек на то, что я делаю неправильно?

Вы можете увидеть весь источник здесь: http://luisargote.com/flickr/javascript/argote_flickr.js

Answer 1

То, что вы видите, это потому, что .ajaxStop() присоединяет новый обработчик событий, и вы каждый раз присоединяете новый. Просто переместите его наружу (но все еще внутри обработчика document.ready), вот так:

// This gets the user ID from a given Flickr user page URL and does some presentation stuff
function getUserID() {
    $("#moreRow").hide(350);

    var usr = document.getElementById('user').value
    var Req_addr = 'http://api.flickr.com/services/rest/?method=flickr.urls.lookupUser&api_key=' + API_key + '&url=http%3A%2F%2Fflickr.com%2Fphotos%2F' + usr + json
    $.getJSON(Req_addr, function(data) {
        // Once the user is known, data about its photos is requested    
        getPhotos(data.user.id)
    });

    // This hides the user data panel    
    $("#userInfo").hide(0);

    // This hides the settings panel    
    $("#settings").hide(0, function() {
        $("#loader").slideDown(750);
    });   
} 

// This is what displays the photos when all of the AJAX requests have received their responses (ajaxStop)
$("#photos").ajaxStop(function() {
    // the page counter is incremented for the next page to be requested next time
    page += 1

    // Add the data for the newly obtained photos to the table
    addPhotosToTable()
});

---

Альтернатива (если по какой-то причине #photos сдулся), оставьте ее там, где она есть внутри функции, и используйте .one(), например:

$("#photos").one("ajaxStop", function() {

Это запустит обработчик один раз, затем отвяжет его, давая желаемый эффект ... но если элемент где-то не разрушается (не похоже, что он есть), придерживайтесь привязывания его один раз снаружи, нет причин делать дополнительную работу.

Answer 2

Вы повторно связываете ajaxStop каждый раз, когда запрашиваете более подробную информацию.

Просто переместите привязку события за пределы getUserId и сделайте это один раз при загрузке страницы.

function getUserID() {
    $("#moreRow").hide(350);

    var usr = document.getElementById('user').value
    var Req_addr = 'http://api.flickr.com/services/rest/?method=flickr.urls.lookupUser&api_key=' + API_key + '&url=http%3A%2F%2Fflickr.com%2Fphotos%2F' + usr + json
    $.getJSON(Req_addr, function(data) {
        // Once the user is known, data about its photos is requested    
        getPhotos(data.user.id)
    });

    // This hides the user data panel    
    $("#userInfo").hide(0);

    // This hides the settings panel    
    $("#settings").hide(0, function() {
        $("#loader").slideDown(750);
    });    
}

jQuery(document).ready(function ($) {
    // This is what displays the photos when all of the AJAX requests have received their responses (ajaxStop)
    $("#photos").ajaxStop(function() {
        // the page counter is incremented for the next page to be requested next time
        page += 1

        // Add the data for the newly obtained photos to the table
        addPhotosToTable()
    });
});

Answer 3

Проверьте длину $ ("# фотографии"). Длина вашей страницы будет увеличиваться для каждого элемента в этом списке