.ajaxStop 回调函数被多次执行

Question

我正在使用 jQuery，但我的问题是，即使我在 .ajaxStop 回调函数中使用“page += 1”，我的页面变量也会增加几次，因为它在第一次之后被执行了多次它被使用了。我使用该变量作为传递给 Flickr API 的参数来获取特定页面的数据。

发生的情况是，第一次调用该函数时，回调函数执行一次。然后我从“更多”按钮调用相同的函数以获取下一组结果，但那个时候该函数被调用两次，下一次被调用三次，依此类推......这意味着我可以获得第 1 页， 2、4、7、11等……

我调用的 AJAX 函数基本上是 .getJSON 函数和一些在其回调方法中调用的额外 .getJSON 函数 [在 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() 附加了一个 new 事件处理程序，而您每次都附加一个新事件处理程序。只需将它移到外面（但仍然在 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

检查 $("#photos").length 的长度，您的页面将针对该列表中的每个项目递增