What causes the inconsistency in time intervals in the loop?

Question

What causes the inconsistency in time intervals in the loop?

My goal was to create a simple slider that loops through 3 images, with each image staying visible for 3 seconds before fading out and the next one fading in. However, I encountered an issue:
The first image can stay for 3 seconds, but once the loop starts, the subsequent images change immediately without waiting for the full 3-second interval. Why is it not maintaining the delay?
You can view the Demo here.

var i = 0;
var name = ['Cat', 'Dog', 'Duck'];

function next() {
  if (i > 1) {
    i = 0;
  } else {
    i++;
  };
  $('#loop').fadeOut(1000, function() {
    $(this).css('background', 'url("' + i + '.png")').fadeIn(1000);
    $('h1').html(name[i]);
  });
};
setInterval(next, 3000);

#loop {
  width: 300px;
  height: 300px;
  background: url('0.png');
}
h1 {
  padding-top: 310px;
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="loop">
  <h1>Cat</h1>
</div>

javascript jquery html css

Answer 1

Answer №1

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Loop Animation</title>
    <style type="text/css">
        #loop{
            width: 300px;
            height: 300px;
            background: url('0.png');
        }
        h1{
            padding-top: 310px;
            text-align: center;
        }
    </style>
</head>
<body>
<div id="loop">
    <h1>Animals</h1>
</div>


<script src="https://code.jquery.com/jquery-3.0.0.min.js"
        integrity="sha256-JmvOoLtYsmqlsWxa7mDSLMwa6dZ9rrIdtrrVYRnDRH0="
        crossorigin="anonymous">
</script>
<script>
    $(function (){
        var counter = 0;
        var animalNames = ['Cat', 'Dog', 'Duck'];

        var timerId = setTimeout(animateNext, 3000);
        function animateNext(){
            if (counter > 1) {
                counter = 0;
            }else{
                counter++;
            };
            $('#loop').fadeOut(1000, function (){
                $(this).css('background', 'url("'+ counter +'.png")').fadeIn(1000);
                $('h1').html(animalNames[counter]);
                timerId = setTimeout(animateNext, 3000);
            });
        };

    });
</script>
</body>


</html>

Answer 2

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Loop Animation</title>
    <style type="text/css">
        #loop{
            width: 300px;
            height: 300px;
            background: url('0.png');
        }
        h1{
            padding-top: 310px;
            text-align: center;
        }
    </style>
</head>
<body>
<div id="loop">
    <h1>Animals</h1>
</div>


<script src="https://code.jquery.com/jquery-3.0.0.min.js"
        integrity="sha256-JmvOoLtYsmqlsWxa7mDSLMwa6dZ9rrIdtrrVYRnDRH0="
        crossorigin="anonymous">
</script>
<script>
    $(function (){
        var counter = 0;
        var animalNames = ['Cat', 'Dog', 'Duck'];

        var timerId = setTimeout(animateNext, 3000);
        function animateNext(){
            if (counter > 1) {
                counter = 0;
            }else{
                counter++;
            };
            $('#loop').fadeOut(1000, function (){
                $(this).css('background', 'url("'+ counter +'.png")').fadeIn(1000);
                $('h1').html(animalNames[counter]);
                timerId = setTimeout(animateNext, 3000);
            });
        };

    });
</script>
</body>


</html>

Answer 3

Answer №2

You have the option to utilize .queue(), .delay(), .promise(), or even recursion

$(function() {

var names = ['Lion', 'Elephant', 'Zebra'];

var images = ["http://placehold.it/300x300?text=Lion"
             , "http://placehold.it/300x300?text=Elephant"
             , "http://placehold.it/300x300?text=Zebra"]

function next() {
  return $("#loop")
    .queue("names", $.map(names, function(name, i) {
      return function(next) {
        $(this).css("background", "url(" + images[i] + ")")
        .find("h1").html(name).end()
        .fadeIn(1000, function() {
          $(this).delay(3000)
          .fadeOut(1000).promise().then(next)
        })
      }
    }))
    .dequeue("names").promise("names").then(next)
};

next();

})

#loop {
  width: 300px;
  height: 300px;
  background-repeat:no-repeat;
}
h1 {
  padding-top: 310px;
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="loop">
  <h1>Lion</h1>
</div>

Answer 4

You have the option to utilize .queue(), .delay(), .promise(), or even recursion

$(function() {

var names = ['Lion', 'Elephant', 'Zebra'];

var images = ["http://placehold.it/300x300?text=Lion"
             , "http://placehold.it/300x300?text=Elephant"
             , "http://placehold.it/300x300?text=Zebra"]

function next() {
  return $("#loop")
    .queue("names", $.map(names, function(name, i) {
      return function(next) {
        $(this).css("background", "url(" + images[i] + ")")
        .find("h1").html(name).end()
        .fadeIn(1000, function() {
          $(this).delay(3000)
          .fadeOut(1000).promise().then(next)
        })
      }
    }))
    .dequeue("names").promise("names").then(next)
};

next();

})

#loop {
  width: 300px;
  height: 300px;
  background-repeat:no-repeat;
}
h1 {
  padding-top: 310px;
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="loop">
  <h1>Lion</h1>
</div>

What causes the inconsistency in time intervals in the loop?

Answer №1

Answer №2

Similar questions

Retrieve specific information from checkboxes within a form

I desire to activate the textbox only when the radiobtnlist value equals 1

Retrieve the text inside the DIV that contains the clicked link

Navigating through a website with just a click and automatic scrolling

Is it possible to integrate a Neo4j Graph Visualization running on a virtual machine into my flask user interface?

Tips on sending an array to material-ui dataSource props

Using NodeJS to assign key-value pairs to a JSON object

Mobile responsiveness of Bootstrap navbar

Transform a protractor screenshot into a PDF file

Tips for successfully transferring large amounts of data using XmlHttpRequest in ajax calls

AngularJS ui-router in HTML5 mode is a powerful combination that allows

How to Resolve ENOENT ERROR When Using fs.unlink in an Express.js Simple Application?

Apply bold formatting to the HTML text only, leaving the EJS variable untouched beside it

Choose a single conditional element by using the .each method in JavaScript

How can I retrieve individual form values within a loop using AJAX without mixing them up?

Transforming a hierarchical array into a string based on a specific condition

Angular log out function to automatically close pop-up windows

Creating a Future Prediction Graph with ECharts

How to include an href in a button using Pug without disrupting a form

Perfectly aligning css tabs both vertically and horizontally with dead centering technique