Instagram API 的分页链接问题答案

【问题标题】：Issue With Pagination link from Instagram APIInstagram API 的分页链接问题
【发布时间】：2014-09-05 02:23:11
【问题描述】：

这是我第一次使用分页。我遇到的问题是，在点击分页按钮一定数量后，我从 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);

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

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

谢谢，

【问题讨论】：

标签： javascript jquery pagination instagram

【解决方案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;

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

【讨论】：