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; };

这里实现轮播效果：

// 立即执行渲染一次 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简单倒计时效果的实现