JavaScript + setInterval は単純なデータカルーセル効果を実装します

プロジェクトのシナリオ:

異なる分類データに従って、データTOPリストカルーセルが実現されます。例えばここでは20種類ありますが、この20種類でTOP詳細データのカルーセル描画を満たします。

問題の説明

ヒント: 重要な点は、バックエンドインターフェイスがすべてのカテゴリのトップランキングデータ量を満たすことができないということです。ここで、フロントエンドは、異なるカテゴリに従って 1 つずつリクエストしてレンダリングすることしかできません。

一般的な考え方:
1. カルーセルは時間差を満たす必要があります。ループを考慮して、ここではタイマー const timer = setInterval() が使用されます。
2. 後のリクエスト制御を容易にするために、分類の総量を記録します const lengthType:number = typeLists.length (ここでの typeLists は分類データセットです);
3. ステップ 1 は、暫定的にrequest 1 分に 1 回 getTopSellingList();
4. ステップ 3 が完了したら、現在のカテゴリの TOP 詳細を showTOPInfos={} にして保存し、後でオブジェクトが使用される理由を説明します。
5. if Object.keys(showTOPInfos).length < lengthType。手順 3 と 4 を繰り返します。
6. if Object.keys(showTOPInfos).length === lengthType。タイマータイマーを終了します;
7. この時点で重要なステップに入り、取得したデータのレンダリングを切り替え、const allTimer = setInterval() を定義し、1 つのカテゴリの TOP ランキングデータを 1 回につき 1 回レンダリングします。カテゴリに応じた分;

実装部分:

ヒント: 最初の setInterval は、分類されたデータを 1 つずつ取得してカルーセルでレンダリングするもので、2 番目の 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 = { 'フルーツ' : [ { … }, { … }, ] 、 'ドリンク' : [ { … }, { … }, < a i=9> ]、 …… } 利点: データを簡単に区別し、対応するデータをレンダリングして照合することができます。識別 a>