Delay Intervals After Each Loop in JQuery

Question

I'm looking at setting a 2-3 second delay on a sprite animation. How do I pause the end of each interval and then continue from 0? I used the code below to run only an interval with no delay at the end.

var imgWidth = 48;
var numImgs = 60;
var cont = 0;

var animation = setInterval(function() {
  var position = -1 * (cont * imgWidth);
  $('#container').find('img').css('margin-left', position);

  cont++;
  if (cont == numImgs) {
    cont = 0;
  }
}, 18);

#container {
  width: 48px;
  height: 48px;
  display: block;
  overflow: hidden;
}

#container img {
  width: 2880px;
  height: 48px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
  <img src="https://visualcraftsman.com/doh/rdWaitAll.png" alt="My super animation" />
</div>

fiddle

Yes, pause the animation for a couple seconds and then continue from 0. — jottin
– jottin, Commented Dec 12, 2022 at 22:58

showdev · Accepted Answer · 2022-12-12 23:27:27Z

2

One idea is to use setTimeout() recursively and change the delay depending on the animation's frame number.

// define variables
const $img = $('#container').find('img');
const imgWidth = 48;
const numImgs = 60;
var cont = 0;
var delay = 18;

function advance() {

  // increment frame number, loop back to zero
  cont = cont == numImgs ? 0 : cont + 1;

  // calculate positioning margin
  let position = -1 * (cont * imgWidth);

  // calculate viewing time for this frame
  let delay = cont == 0 ? 1000 : 18;

  // position the image
  $img.css('margin-left', position);

  // schedule next frame advance
  setTimeout(advance, delay);

}

// initiate the recursive loop
advance();

#container {
  width: 48px;
  height: 48px;
  display: block;
  overflow: hidden;
}

#container img {
  width: 2880px;
  height: 48px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
  <img src="https://visualcraftsman.com/doh/rdWaitAll.png" alt="My super animation" />
</div>

edited Dec 12, 2022 at 23:27

answered Dec 12, 2022 at 23:03

showdev

29.3k37 gold badges61 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

jottin Over a year ago

That is definitely more flexible code than mine, thx!

Collectives™ on Stack Overflow

Delay Intervals After Each Loop in JQuery

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related