Question 36475 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Looping through elements with setTimeout – Jquery

I’m trying to loop through divs with a delay in between. It works okay the first couple of times through. But then it just keeps getting faster. I can’t figure out what I’m doing. Help me stackoverflow, you’re my only hope.

showSlides();

function showSlides() {
  $('.mySlides:not(:first)').hide(); 
  $.map($('.mySlides'),function(el){
    myTimeout=setTimeout(function(){
      console.log(el); 
      
      $(el).siblings().fadeOut(1000); 
      $(el).fadeIn(1000); 
      if($(el).is(':last-child')) { clearTimeout(myTimeout); showSlides(); }
    },7000); 
  }); 
}
Tags:

3

Answers


  1. 0

    No need for each, map or interval, just use delay and jQuery will loop for you

    const $slides = $('.mySlides');

const fadeInAndOut = $el => {
  $el.fadeIn(1000).delay(2000).fadeOut(1000, () => {
    if ($el.next().length) fadeInAndOut($el.next()); // is there a next?
    else fadeInAndOut($el.siblings(':first')); // else start over
  });
};
$slides.hide();
fadeInAndOut($slides.eq(0))
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="container">
  <div class="mySlides">Slide 1</div>
  <div class="mySlides">Slide 2</div>
  <div class="mySlides">Slide 3</div>
</div>
    Login or Signup to reply.
  2. 0

    You are setting timeout for all the slides together almost the same instant. A quick fix is to set in advance the timing in a 7 seconds intervals.

    $('.mySlides:not(:first)').hide();

showSlides();

function showSlides() {
  var delay = 2000;
  document.querySelectorAll('.mySlides').forEach(function(el, index) {
    myTimeout = setTimeout(function() {

      $(el).siblings().fadeOut(1000);
      $(el).fadeIn(1000);
      if ($(el).is(':last-child')) {
        clearTimeout(myTimeout);
        setTimeout(showSlides, delay);
      }
    }, delay * (index));
  });
}
    .mySlides {
  width: 200px;
  height: 200px;
  border: 1px solid black;
  text-align: center;
  font-size: 128px;
  line-height: 200px;
  position: absolute;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="container">
  <div class="mySlides">1</div>
  <div class="mySlides">2</div>
  <div class="mySlides">3</div>
</div>
    Login or Signup to reply.
  3. 0

    Here is another take on it:

    const $sl=$('.mySlides').hide();
$sl.i=0; $sl.eq(0).show();

setInterval(()=>{
 $sl.eq($sl.i).fadeOut(1000);
 $sl.eq($sl.i=($sl.i+1)%$sl.length).fadeIn(1000);
},2000);
    .mySlides {
  width: 200px;
  height: 200px;
  border: 1px solid black;
  text-align: center;
  font-size: 128px;
  line-height: 200px;
  position: absolute;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="container">
  <div class="mySlides">1</div>
  <div class="mySlides">2</div>
  <div class="mySlides">3</div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search