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);

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

pagLink variable console log

如果您可以看到不同的问题或建议采用不同的方式来构建我的功能，那将非常感激。 sortAndStore函数中的data参数是原始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;

因此，解决方案是重新定义变量，而不是添加额外的变量，就像我偶然做的那样。

来自Instagram API的Pagination链接问题

1 个答案: