.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()附加了一個新的事件處理程序，並且每次都附加一個新的事件處理程序。 只需將其移到外面（但仍在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”）。長度，您的頁面將針對該列表中的每個項目遞增