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”）的长度。长度，您的页面将针对该列表中的每个项目递增

.ajaxStop回调函数被执行多次

3 个答案: