.ajaxStop función de devolución de llamada que se ejecuta varias veces

Question

Estoy usando jQuery pero mi problema es que mi variable de página se incrementa varias veces incluso cuando estoy usando "página + = 1" en la función de devolución de llamada .ajaxStop porque está siendo ejecutado más de una vez después de la primera vez que se usa. Utilizo esa variable como un parámetro pasado a la API de Flickr para obtener una página específica de datos.

Lo que está sucediendo es que la primera vez que se llama a esa función, la función de devolución de llamada se ejecuta una vez. Luego llamo a la misma función desde un botón "más" para obtener el siguiente conjunto de resultados, pero esa vez la función se llama dos veces, la próxima vez se llama tres veces, y así sucesivamente ... Eso significa que puedo obtener la página 1, 2, 4, 7, 11, etc ...

las funciones AJAX voy a llamar a la función son básicamente .getJSON y algunas funciones adicionales .getJSON llamados en su método de devolución de llamada [getPhotos interior (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() 
    }); 
} 

¿Alguna pista sobre lo que estoy haciendo mal?

se puede ver toda la fuente aquí:. http://luisargote.com/flickr/javascript/argote_flickr.js

Answer 1

Lo que estás seeing es porque .ajaxStop() conecta un controlador de eventos nuevo, y está adjuntando uno nuevo cada vez. Basta con mover fuera (pero aún dentro de un manejador de document.ready), así:

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

---

La alternativa es (si por alguna razón #photos consigue arrancado), dejarlo donde está dentro de la función y el uso .one() así:

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

esto ejecutará el manejador de una vez, luego desvincularla, dando el efecto deseado ... pero a menos que el elemento está siendo destruido en alguna parte (que no suena como lo es) seguir con uniéndolo una vez afuera, sin razón t o hacer trabajo extra.

Answer 2

Comprobar la longitud de $ ("#") de longitud fotos, su página se incrementará para cada elemento de la lista

Answer 3

Usted está volviendo a encuadernar el ajaxStop cada vez que solicita más detalles.

Simplemente mueva el enlace de eventos fuera de getUserId, y hágalo una vez en la carga de la página.

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