项目场景：

根据不同分类数据，实现数据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;
};

这里实现轮播效果：

   //  立即执行渲染一次 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);

// 数据渲染

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

---

注意⚠️：

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

相关推荐：
JavaScript简单倒计时效果的实现