有沒有辦法以6秒的間隔一個接一個地回圈這3個函式？

所以我的任務是不斷顯示 4 個徽標，然后是 4 個徽標，然后是 3 個徽標，它們之間的間隔為 6 秒。我做了一個函式來顯示 logos 陣列的 4 個 logo 中的第一個塊。我需要以 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 >
    <img src="${firstArr[logo].img}"/>
    </div>`
  }
 }

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

PS：如果在每個 4-4-3 回圈之后它們都被洗牌，這是一個獎勵

uj5u.com熱心網友回復：

添加 css & html 部分只是為了顯示結果，您可以忽略它們

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

標籤：javascript 功能 循环 设置间隔

上一篇：如何將按鈕的id傳遞給Angular函式？

下一篇：如何設定useState只選擇一種顏色