JavaScript + setInterval implements simple data carousel effect

Project scenario:

According to different classification data, the data TOP list carousel is realized. For example, there are 20 types here, which satisfy the carousel rendering of TOP detailed data under these 20 types.

Problem Description

Tip: The key point is that the back-end interface cannot meet the TOP ranking data volume of all categories. Here, the front-end can only request and render one by one according to different categories.

General idea:
1. The carousel must meet a time difference. Considering the loop, the timer const timer = setInterval() is used here;
2. Record the total amount of classification const lengthType:number = typeLists.length. (typeLists here is the classification data set) to facilitate later request control;
3. Step 1 tentatively runs a request once a minute. getTopSellingList();
4. After step three is completed, save the current category TOP details let showTOPInfos={}, and explain why objects are used later;
5. if Object .keys(showTOPInfos).length < lengthType. Repeat steps three and four
6. if Object.keys(showTOPInfos).length === lengthType. End the timer timer;
7. At this point, we enter an important step, switch rendering for the acquired data, define const allTimer = setInterval(), and render one category TOP ranking data once per minute according to the category;

Implementation part:

Tip: The first setInterval is to obtain the classified data one by one and render it in carousel, while the second setInterval is to obtain the complete data and perform subsequent carousel rendering of the data:

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

Here is the carousel effect:

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

//data rendering

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

NOTE⚠️:

The data obtained here is stored through enumeration, for example
const list = { 'Fruit' : [ { … }, { … }, ], 'Drink' : [ { … }, { … }, < a i=9> ], …… } Benefits: It is easy to distinguish data and render and match the corresponding data according to the identification a>