setInterval - wait longer on first element for each loop-CodePudding

I have an image slideshow that I am doing using setInterval. I would like it to hold for 5s on the first item, and then 1s on the additional items each time it loops. Here's what I tried:

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 >
  <img  src="https://via.placeholder.com/350x150?text=Hold 5 Seconds" />
  <img  src="https://via.placeholder.com/350x150/0000FF/808080?text=Hold 1 Second" />
  <img  src="https://via.placeholder.com/350x150/FF0000/FFFFFF?text=Hold 1 Second" />
  <img  src="https://via.placeholder.com/350x150/000000/FFFFFF?text=Hold 1 Second" />
</div>

This does not seem to work, I'm guessing because once the setInterval delay has been set, it cannot be changed. So how would I go about making it so that the first image shows for 5s, the next 3 show for 1s and then back to 5s on the first image?

CodePudding user response：

You can use setTimeOut for that. I keep almost of your code so that you can understand.

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 >
  <img  src="https://via.placeholder.com/350x150?text=Hold 5 Seconds" />
  <img  src="https://via.placeholder.com/350x150/0000FF/808080?text=Hold 1 Second" />
  <img  src="https://via.placeholder.com/350x150/FF0000/FFFFFF?text=Hold 1 Second" />
  <img  src="https://via.placeholder.com/350x150/000000/FFFFFF?text=Hold 1 Second" />
</div>

CodePudding user response：

You can not change the interval by that way. It repeatedly calls a function or executes a code snippet, with a fixed time delay between each call. Updating the interval you have to clear and create new one with new delay time as the example below. But I think you might have to try to use the setTimeOut instead.

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