代码之家 › 专栏 › 技术社区 › user13286

setInterval-每个循环的第一个元素等待更长时间

setinterval for-loop javascript

user13286 · 技术社区 · 4 年前

我有一个我正在使用的图像幻灯片 setInterval .我希望它在第一个项目上保持5秒,然后在每次循环时在附加项目上保持1秒。以下是我尝试过的:

let current = 0,
    delay = 5000;
    
const slides = document.querySelectorAll('.slide');
setInterval(function() {
    for (var i = 0; i < slides.length; i++) {
        slides[i].style.opacity = 0;
    }
    current = (current != slides.length - 1) ? current + 1 : 0;
    console.log(current);
    if (current === 0) {
        delay = 5000;
    } else {
        delay = 1000;
    }
    slides[current].style.opacity = 1;
}, delay);

.slider {
  width:300px;
  height:150px;
}
  .slider img {
    position: absolute;
    transition: opacity .5s ease-in;
  }
    .slider img + img {
      opacity:0;
    }

<div class="slider">
  <img class="slide" src="https://via.placeholder.com/350x150?text=Hold 5 Seconds" />
  <img class="slide" src="https://via.placeholder.com/350x150/0000FF/808080?text=Hold 1 Second" />
  <img class="slide" src="https://via.placeholder.com/350x150/FF0000/FFFFFF?text=Hold 1 Second" />
  <img class="slide" src="https://via.placeholder.com/350x150/000000/FFFFFF?text=Hold 1 Second" />
</div>

我猜这似乎不起作用,因为一旦 设定间隔 延迟已设置,无法更改。那么,我该怎么做才能让第一张图片显示5秒,接下来的3张图片显示1秒,然后在第一张图片上回到5秒?

2 回复 | 直到 4 年前

Daniel Tran 4 年前

你可以使用setTimeOut。我几乎保留了你的代码,这样你就可以理解了。

let current = 0,
    delay = 5000;
    
const slides = document.querySelectorAll('.slide');
function showNextSlide() {
  for (var i = 0; i < slides.length; i++) {
      slides[i].style.opacity = 0;
  }

  slides[current].style.opacity = 1;
  if (current === 0) {
    delay = 5000;
  } else {
    delay = 1000;
  }
  
  current = (current != slides.length - 1) ? current + 1 : 0;
  setTimeout(showNextSlide, delay);
}


showNextSlide();

.slider {
  width:300px;
  height:150px;
}
  .slider img {
    position: absolute;
    transition: opacity .5s ease-in;
  }
    .slider img + img {
      opacity:0;
    }

<div class="slider">
  <img class="slide" src="https://via.placeholder.com/350x150?text=Hold 5 Seconds" />
  <img class="slide" src="https://via.placeholder.com/350x150/0000FF/808080?text=Hold 1 Second" />
  <img class="slide" src="https://via.placeholder.com/350x150/FF0000/FFFFFF?text=Hold 1 Second" />
  <img class="slide" src="https://via.placeholder.com/350x150/000000/FFFFFF?text=Hold 1 Second" />
</div>

HoangHieu 4 年前

你不能用那种方法改变时间间隔。它重复调用函数或执行代码段,每次调用之间有固定的时间延迟。更新你必须清除的间隔,并创建一个新的延迟时间,如下例所示。但我认为你可能必须尝试使用setTimeOut。

let current = 0,
delay = 5000, nIntervId = null;
    
const slides = document.querySelectorAll('.slide');

changeTheSlideItem = function(){
     for (var i = 0; i < slides.length; i++) {
        slides[i].style.opacity = 0;
    }
    current = (current != slides.length - 1) ? current + 1 : 0;
    console.log(current);
    if (current === 0) {
        delay = 5000;
    } else {
        delay = 1000;
    }
    slides[current].style.opacity = 1;
    if(nIntervId){
      clearInterval(nIntervId);
    }
    nIntervId = setInterval(changeTheSlideItem, delay);
}

nIntervId = setInterval(changeTheSlideItem, delay);