javascript - instafeed.js - 过滤器限制答案

【问题标题】：javascript - instafeed.js - Limit with filtersjavascript - instafeed.js - 过滤器限制
【发布时间】：2016-09-16 14:38:10
【问题描述】：

我正在使用 instafeed.js 从 Instagram 加载一些照片，并且我有一个小功能可以加载将特定标签设置为过滤器的提要。像这样：

function generateFeed(category){
   var feed = new Instafeed({
          target: category+'Feed',
          get: 'user',
          userId: 'USERID',
          accessToken: 'TOKEN',
          sortBy: 'most-recent',
          template: '<div id="insta-card" class="animated fadeIn col-lg-4 col-md-4 col-sm-4 col-xs-4"><a class="fancybox-thumb-'+category+'" rel="fancybox-thumb" href="{{image}}"><img class="insta-img" src="{{image}}"></a><div class="insta-infos"><p>{{caption}}</p></div></div>',
          limit: '12',
          resolution: 'standard_resolution',
          filter: function(image) {
              return image.tags && image.tags.indexOf(category) >= 0;
          },
          after: function(){
            if (!this.hasNext()) {
                $('.load-button').hide();
            }else{
                $('.load-button').show();
            }
          }
        });
feed.run();

$('.load-button').on('click',function(){
        feed.next();
});
}

一切正常，但似乎 limit（在本例中为 12）不是加载照片的限制，而是获取搜索标签的照片的限制。

如果在此限制中没有带有该标签的照片，则如果该照片存在且具有该标签，则提要也将为空！

有没有办法解决这个问题？通过过滤器搜索时将限制设置为最大值（60）？

如果可以从 feed.next() 函数中传递限制，那将很容易，但我没有找到任何有效的方法。

谁能帮帮我？

谢谢。

【问题讨论】：

标签： javascript instafeedjs

【解决方案1】：

您应该将limit 设置为更高的值，并手动限制filter 函数内的最大结果数量。

为了在调用 .next() 时保持这种行为，您应该在每次加载提要时重置计数器：

function generateFeed(category){
  var currentCount = 0;
  var feed = new Instafeed({
    target: category+'Feed',
    get: 'user',
    userId: 'USERID',
    accessToken: 'TOKEN',
    sortBy: 'most-recent',
    template: '<div id="insta-card" class="animated fadeIn col-lg-4 col-md-4 col-sm-4 col-xs-4"><a class="fancybox-thumb-'+category+'" rel="fancybox-thumb" href="{{image}}"><img class="insta-img" src="{{image}}"></a><div class="insta-infos"><p>{{caption}}</p></div></div>',
    limit: '60',
    resolution: 'standard_resolution',
    before: function() {
      currentCount = 0;
    },
    filter: function(image) {
      // put your real limit here
      var shouldDisplay = (currentCount < 12);

      if (shouldDisplay) {
        if (image.tags && image.tags.indexOf(category) >= 0) {
          currentCount += 1;
        } else {
          shouldDisplay = false;
        }
      }

      return shouldDisplay;
    },
    after: function(){
      if (!this.hasNext()) {
        $('.load-button').hide();
      } else{
        $('.load-button').show();
      }
    }
  });
  feed.run();

  $('.load-button').on('click', function(){
    feed.next();
  });
}

请记住，如果您的 API 客户端位于 Sandbox Mode 中，则无论您将 limit 设置为什么，您的调用都被限制为 20 个项目，因此这可能对您影响不大。

【讨论】：