有没有办法以 6 秒的间隔一个一个地循环这 3 个函数？

Question

所以我的任务是不断显示 4 个徽标，然后是 4 个徽标，然后是 3 个徽标，它们之间的间隔为 6 秒。我创建了一个函数来显示徽标数组的 4 个徽标中的第一块。我是否需要使用 diff 数组作为参数调用该函数 3 次？正确的做法是什么？

let logos = [
  {
    id: 1,
    img: "./img/apple.png",
  },
  {
    id: 2,
    img: "./img/instagram.jpg",
  },
  {
    id: 3,
    img: "./img/github.png",
  },
  {
    id: 4,
    img: "./img/google.png",
  },
  {
    id: 5,
    img: "./img/lyft.png",
  },
  {
    id: 6,
    img: "./img/paypal.png",
  },
  {
    id: 7,
    img: "./img/ripple.png",
  },
  {
    id: 8,
    img: "./img/spotify.png",
  },
  {
    id: 9,
    img: "./img/tesla.png",
  },
  {
    id: 10,
    img: "./img/uber.png",
  },
  {
    id: 11,
    img: "./img/youtube.png",
  },
];

//DOM 
const imageWrapper = document.querySelector('.logos-wrapper')
// const logo = document.createElement('div');

const firstArr = logos
// .map(logo => logo.img)
.slice(0, 4);
console.log(firstArr);

const secondArr = logos.slice(4, 8);
console.log(secondArr)  

const thirdArr = logos.slice(8, 11);
console.log(thirdArr)

function showLogos(firstArr) {
  for (let logo in firstArr) {
    imageWrapper.innerHTML += 
    `<div class="col-3 mb-3 logo-item">
    <img src="${firstArr[logo].img}"/>
    </div>`
  }
 }

showLogos(firstArr)
showLogos(secondArr)
showLogos(thirdArr)

PS: 如果在 4-4-3 的每个循环后将它们洗牌，这是一个奖励

Answer 1

Added the css & html part just to show the result ,you may dismiss them

let logos = [{
    id: 1,
    img: "https://picsum.photos/400/250?random=1&lock=1",
  },
  {
    id: 2,
    img: "https://picsum.photos/400/250?random=2&lock=2",
  },
  {
    id: 3,
    img: "https://picsum.photos/400/250?random=3&lock=3",
  },
  {
    id: 4,
    img: "https://picsum.photos/400/250?random=4&lock=4",
  },
  {
    id: 5,
    img: "https://picsum.photos/400/250?random=5&lock=5",
  },
  {
    id: 6,
    img: "https://picsum.photos/400/250?random=6&lock=6",
  },
  {
    id: 7,
    img: "https://picsum.photos/400/250?random=7&lock=7",
  },
  {
    id: 8,
    img: "https://picsum.photos/400/250?random=8&lock=8",
  },
  {
    id: 9,
    img: "https://picsum.photos/400/250?random=9&lock=9",
  },
  {
    id: 10,
    img: "https://picsum.photos/400/250?random=10&lock=0",
  },
  {
    id: 11,
    img: "https://picsum.photos/400/250?random=11&lock=1",
  },
];

function showLogos(array) {
  const imageWrapper = document.querySelector(".logos-wrapper");

  // slices the array into chunks with 4 children
  const chunkSize = 4;
  const chunkedArray = [];
  for (let i = 0; i < array.length; i += chunkSize) {
    const chunk = array.slice(i, i + chunkSize);
    chunkedArray.push(chunk);
  }

  // changes the visible chunk in ".logos-wrapper"
  function setChunk(array) {
    imageWrapper.innerHTML = "";
    array.forEach((logo) => {
      imageWrapper.innerHTML += `<div class="col-3 mb-3 logo-item"><img src="${logo.img}"/></div>`;
    });
  }
  // runs once on start to show the first chunk
  setChunk(chunkedArray[0]);

  // runs setChunk function every 6s and updates the content
  let currentChunk = 0;

  function changeChunk() {
    ++currentChunk;
    if (currentChunk >= chunkedArray.length) currentChunk = 0;
    setChunk(chunkedArray[currentChunk]);
  }
  let loop = setInterval(changeChunk, 6000);
}
showLogos(logos);

body {
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100vw;
  height: 100vh;
}

.logos-wrapper {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.logo-item {
  height: 200px;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  margin: 15px;
  border-radius: 25px;
  overflow: hidden;
  opacity: 1;
  animation: fadeIn 0.5s ease;
}

@keyframes fadeIn {
  from {
    transform: scale(0);
  }
  to {
    transform: scale(1);
  }
}

img {
  width: 100%;
  height: 100%;
  background-position: center;
  object-fit: cover;
}

<div class="logos-wrapper"> </div>

有没有办法以 6 秒的间隔一个一个地循环这 3 个函数？

Is there a way to loop these 3 functions one by one on interval of 6 seconds?

javascript

loops

function

setinterval