javascript - 来自 Instagram API 的分页链接问题

Question

这是我第一次使用分页。我遇到的问题是，在对分页按钮进行一定次数的点击后，我从 Instagram API 收到了多个响应。我想我已经将问题缩小到函数可能被触发多次这一事实。看看我的函数。

接收数据并将其排序给其他函数:

function sortAndStore(data) {

    var images = data.data,
        pagLink = data.pagination.next_url;

    var newImages = [];

    for (i = 0; i < images.length; i++) {
        var link = images[i].link,
            standardRes = images[i].images.standard_resolution.url,
            thumb = images[i].images.thumbnail.url;

        var tempImages = new Object();

        tempImages.link = link;
        tempImages.standard_res = standardRes;
        tempImages.thumbnail = thumb;

        newImages.push(tempImages);

    }

    createLayout(newImages);

    loadMore(pagLink);

}

创建所需的布局(现在草率但有效):

function createLayout(data) {
    var images = data;

    if ($('#authorizeInsta').css('display') === 'inline') {

        $('#authorizeInsta').hide();
        // Adds additonal structure
        $('<div id="instagramFeed" class="row-fluid" data-count="0"></div>').insertAfter('.direct_upload_description_container');

    }

    if (!$('#feedPrev').length > 0) {
        $('<ul id="feedNav" class="pagination"><li><a id="feedPrev" href="#">Prev</a></li><li><a id="feedNext" href="#">Next</a></li></div>').insertAfter('#instagramFeed');
    }

    var count = $('#instagramFeed').data('count'),
        countParse = parseInt(count);
        newCount = countParse + 1;

    $('<div id="row' + newCount + '" class="span3">').appendTo('#instagramFeed');
    $('#instagramFeed').data('count', newCount);


    for (i = 0; i < images.length; i++) {

        var link = images[i].link,
            standardRes = images[i].standard_res,
            thumb = images[i].thumbnail,
            newImage = '<img data-image="' + standardRes + '" src="' + thumb + '" class="feedImage" id="feedImage' + i + '"/>';

        $(newImage).appendTo('#row' + newCount + '');

    }

    imageSelect();
}

分页功能:

function loadMore(link) {

    var pagLink = link;

    console.log(pagLink);

    $('#feedPrev').unbind('click').click(function(event) {

        $.ajax({
            url: link,
            type: 'GET',
            dataType: 'jsonp',
        })
            .done(function(data) {
                sortAndStore(data);
            })
            .fail(function(data, response) {
                console.log(data);
                console.log(response);
            });

        return false;
    });

}

我知道问题可能出在 sortAndStore 函数中

createLayout(newImages);

loadMore(pagLink);

这是分页链接控制台注销的内容。问题是我点击了 3 次按钮，得到了 4 个回复。前两次都很好。我得到了一个分页链接，但是第三次​​我收到了两个响应。

如果您能看到不同的问题或建议以不同的方式构建我的函数，我们将不胜感激。 sortAndStore 函数中的数据参数是来自原始 Instagram API 调用的数据。

谢谢，

Answer 1

想通了!问题是每次单击分页按钮时，浏览器都会为 pagLink 存储一个新值。因此，在单击按钮两次后，有两个存储的变量进行了两次分页 API 调用。

解决方法是在每次新的分页链接通过函数时重新定义变量，而不是定义额外的 pagLink 变量。

所以这样:

function sortAndStore(data) {

    var images = data.data;
    pagLink = data.pagination.next_url;

代替这个:

function sortAndStore(data) {

    var images = data.data,
        pagLink = data.pagination.next_url;

所以解决方案是重新定义变量，而不是添加一个额外的变量，就像我不小心做的那样。