问题与Instagram的分页链接API

这是我第一次使用分页。我遇到的问题是，在点击某个分页按钮后，我会从Instagram API获得多个回复。我想我已经缩小了这个问题，因为这个函数可能会多次触发。看看我的功能。问题与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函数中的数据参数是来自原始Instagram API调用的数据。

谢谢，

来源

2014-09-04 Max Baldwin

想通了！问题在于，每次点击分页按钮时，浏览器都会为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;

因此，解决办法是重新定义的变量，而不是添加额外的一个，就像我是偶然做。

来源

2014-09-04 18:23:11

问题与Instagram的分页链接API

回答

相关问题