.ajaxStop Callback-Funktion wird mehrmals ausgeführt

Question

Ich benutze jQuery, aber mein Problem ist, dass meine Seite Variable mehrmals inkrementiert wird, auch wenn ich "page + = 1" in der .ajaxStop Callback-Funktion verwenden, weil es ist nach dem ersten Mal mehr als einmal ausgeführt. Ich verwende diese Variable als Parameter, der an die Flickr-API übergeben wird, um eine bestimmte Seite mit Daten zu erhalten.

Was passiert ist, dass beim ersten Aufruf der Funktion die Callback-Funktion einmal ausgeführt wird. Ich rufe dann dieselbe Funktion von einem "mehr" Knopf an, um den nächsten Satz von Ergebnissen zu erhalten, aber dieses Mal wird die Funktion zweimal aufgerufen, das nächste Mal dreimal, und so weiter ... Das bedeutet, dass ich Seite 1 bekommen kann, 2, 4, 7, 11, etc ...

die AJAX-Funktionen sind ich rufe in seinen Callback-Methode namens grundsätzlich die .getJSON Funktion und einige zusätzliche Funktionen .getJSON [innen 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() 
    }); 
} 

Irgendein Hinweis, was ich falsch mache?

Sie können die ganze Quelle sehen hier:. http://luisargote.com/flickr/javascript/argote_flickr.js

Answer 1

in dieser Liste für jedes Element erhöht werden, was Sie Sehen ist, weil .ajaxStop() einen neuen Event-Handler anhängt, und Sie fügen jedes Mal ein neues hinzu. verschiebe es etwas außerhalb (aber immer noch in einem document.ready Handler), wie folgt aus:

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

---

Die Alternative ist (wenn aus irgendeinem Grund #photos wird weggeblasen), lassen Sie es, wo es innerhalb der Funktion und Verwendung ist .one() wie folgt aus:

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

Dies wird die Handler einmal ausgeführt, dann lösen, geben Sie den gewünschten Effekt ... aber es sei denn, das Element irgendwo zerstört wird immer (es klingt nicht wie es ist) halten mit Bindung es einmal draußen, kein Grund t o zusätzliche Arbeit leisten.

Answer 2

Überprüfen Sie die Länge von $ („# Fotos“) Länge, wird Ihre Seite

Answer 3

Sie binden die ajaxStop jedes Mal neu, wenn Sie weitere Details anfordern.

Verschieben Sie einfach die Ereignisbindung außerhalb getUserId, und tun Sie es einmal beim Laden der Seite.

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