JavaScript + setInterval实现简易数据轮播效果

项目场景：

根据不同分类数据，实现数据TOP榜轮播。比如，这里有20种类型，满足这20种类型下的TOP详情数据轮播渲染。

---

问题描述

提示：重点是后端接口无法满足全量分类的TOP排行数据量，这里只能前端根据不同分类逐一请求并渲染

大致思路：
1、轮播肯定需要满足一个时间差，考虑到循环，这里使用定时器const timer = setInterval()；
2、记录分类总量const lengthType:number = typeLists.length. (这里typeLists为分类数据集)，便于后期请求控制；
3、步骤一暂定一分钟跑一次请求 getTopSellingList();
4、步骤三完成后，保存当前分类TOP详情 let showTOPInfos={}，后面解释为什么用对象;
5、if Object.keys(showTOPInfos).length < lengthType. 重复步骤三、四
6、if Object.keys(showTOPInfos).length === lengthType. 结束定时器timer；
7、此时进入重要环节，对已经获取的数据实现切换渲染，定义const allTimer = setInterval()，根据分类每分钟一次渲染一个分类TOP排行数据；

---

实现部分：

提示：第一个setInterval为了逐一获取分类数据并轮播渲染，第二个setInterval则是获取完整数据后对数据进行后续轮播渲染：

获取数据
// 分类TOP数据查询 typeCode 分类标识
export const getTopSellingList = async (typeCode = '', ) => {
  const promise = await new Promise((resolve, reject) => {
           // 你的数据请求
           if (‘成功’) {
              resolve(best_sale_list);
            } else {
             reject(‘失败’);
            }            
  });
  return promise;
};
1
2
3
4
5
6
7
8
9
10
11
12
13

这里实现轮播效果：

   
            //  立即执行渲染一次 
            getTopSellingList(typeLists[0]?.typeCode).then((res) => {
              //对应分类top数据  TODO：接口获取
              showTOPInfos[typeLists[0]?.typeName] = res;
              setTopInfos(showTOPInfos, typeLists[0]?.typeName, res)// 渲染top榜数据
            });

            // 一分钟获取一次，并渲染（全部分类获取为止）
            const timer = setInterval(() => {
              const lengthType:number = typeLists.length; // 分类总数
              let lengthTOP = Object.keys(showTOPInfos).length; // 待展示的分类TOP总数
              if (lengthTOP < lengthType) {
                let nowTOP = typeLists[lengthTOP]; // 当前要获取的TOP分类
                getTopSellingList(nowTOP?.typeCode).then((res) => {
                  const newTOPInfos = { [nowTOP?.typeName]: res }; 
                  // 记录追加本次获取的数据
                  showTOPInfos = { ...showTOPInfos, ...newTOPInfos };
                  setTopInfos(showTOPInfos, owTOP?.typeName, res)// 渲染TOP榜数据
                });
              } else if (lengthTOP === lengthType) {
                // 分类TOP总数达上限时 循环渲染分类TOP数据
                let nowIndex = 0; // 记录当前展示TOP分类索引
                allTimer = setInterval(() => {
                  // 循环上限后重置
                  if (nowIndex === Number(typeLists.length)) {
                    nowIndex = 0;
                  }
                  const nowTypeName = typeLists[nowIndex].typeName; // 当前TOP分类名称
                  // 渲染标题
                   setTopInfos(showTOPInfos, nowTypeName, showTOPInfos[nowTitle])// 渲染TOP榜数据
                  nowIndex += 1;
                }, 60000); // 一分钟更新渲染一次数据
                clearInterval(timer);
              }
            }, 60000);
            
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

// 数据渲染

 // 渲染TOP数据  infos 所有分类TOP商品集合  ,name 当前infos 中对应枚举名, showInfos 当前展示分类TOP数据
setTopInfos(infos, name, showInfos)=>{
// TODO : 这里进行你的数据渲染
}
1
2
3
4

---

注意⚠️：

这里获取的数据通过枚举存储，例如
const list = {
‘水果’ : [
{ …… }，
{ …… }，
]，
‘饮料’ : [
{ …… }，
{ …… }，
]，
……
}
好处：便于区分数据，根据标识渲染匹配对应数据

相关推荐：
JavaScript简单倒计时效果的实现
前端实现定时任务