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则是获取完整数据后对数据进行后续轮播渲染:

javascript 复制代码
获取数据
// 分类TOP数据查询 typeCode 分类标识
export const getTopSellingList = async (typeCode = '', ) => {
  const promise = await new Promise((resolve, reject) => {
           // 你的数据请求
           if ('成功') {
              resolve(best_sale_list);
            } else {
             reject('失败');
            }            
  });
  return promise;
};

这里实现轮播效果:

javascript 复制代码
   
            //  立即执行渲染一次 
            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);
            

// 数据渲染

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

注意⚠️:

这里获取的数据通过枚举存储,例如

const list = {

'水果' : [

{ ...... },

{ ...... },

],

'饮料' : [

{ ...... },

{ ...... },

],

......

}

好处:便于区分数据,根据标识渲染匹配对应数据

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

相关推荐
拾光拾趣录几秒前
Vue Router 执行顺序
前端·vue.js·vue-router
前端权1 分钟前
Vue3 多行文本溢出隐藏与展开收起功能实现总结
前端·vue.js
用户3802258598242 分钟前
vue3源码解析:调度器
前端·vue.js
一一一87112 分钟前
javaScript数据存储, 对象和原型与原型链
javascript
Dolphin_海豚24 分钟前
electron windows 无边框窗口最大化时的隐藏边框问题
前端·electron·api
梦想CAD控件27 分钟前
WEB CAD与Mapbox结合实现在线地图和CAD编辑(CGCS2000)
前端·javascript·vue.js
WTSolutions1 小时前
Excel 转 JSON by WTSolutions API 文档
javascript
screenCui1 小时前
macOS运行python程序遇libiomp5.dylib库冲突错误解决方案
开发语言·python·macos
AverageJoe19911 小时前
一次vite热更新不生效问题排查
前端·debug·vite