javascript - .ajaxStop 回调函数被多次执行

Question

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

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

我调用的 AJAX 函数基本上是 .getJSON 函数和一些在其回调方法 [inside getPhotos(id)] 中调用的额外 .getJSON 函数

// 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() {

这将运行处理程序一次，然后解除绑定(bind)，给出你想要的效果......但除非元素在某处被破坏(听起来不像是这样)否则坚持在外部绑定(bind)一次，没有理由做额外的工作。