先说我们遇到的需求：

swiper组件（轮播）每次需要，提前放很多张照片，

如果数据源一直都在递增，

那么就需要对这组照片进行区间优化

场景就是：一个图片列表页面，

点击其中一张图片时，跳转到新的页面，

并且传递已经渲染的全部图片，放入轮播图组件中，

数据少的时候，是没有性能问题的，

如果我们的列表是下拉加载的，那么我们需要传递的图片数组，就会无限递增，

导致性能出现问题。

想到的处理方案：

每次根据用户点击的那一张图片的索引的上下区间50，这个50可以自己设置，就是最大的照片数量，

进行分割，举例：

我们有10张照片，用户点击了第二张，假设我们上下区间为1张 也就是当前索引+-1，最大数为3

我们想要的结果 当前索引2，+1是3 -1是1，输出1，2，3

再举个以上条件不变，我们点击了第5张，

输出结果就是4，5，6

这就是我们想要的节流区间。

我已经封装好了方法，也做了一些临界值的处理。

export const limitSwiperImgs = (
  activePaper,
  papers,
  newPapersMaxLength = 50
) => {
  let newPapers = [];

  let activePaperIndex = papers.findIndex(
    (papper) => papper._id === activePaper._id
  );
  if (papers.length < newPapersMaxLength) {
    return papers;
  } else {
    let startIndex = activePaperIndex - newPapersMaxLength / 2;
    if (startIndex < 0) {
      startIndex = 0;
      endIndex = newPapersMaxLength;
    }
    let endIndex = activePaperIndex + newPapersMaxLength / 2;
    if (endIndex > papers.length) {
      endIndex = papers.length;
      startIndex = endIndex - newPapersMaxLength;
    }
    for (let i = startIndex; i < endIndex; i++) {
      let item = papers[i];
      newPapers.push(item);
    }
    return newPapers;
  }
};