CODEWITHSUNDEEP
javascripthtmlcss
Vasu Srivastava
Vasu Srivastava

Reputation: 123

How to run setTimeOut infinite times?

I have searched extensively for the same but none of the solution worked so asking here

I want to change the background image [basically change the class of an element], in a loop. But the really tricky part for me [being new to JavaScript] is that setTimeOut stops after a fix number of times. Here's the code:

function addHomeInnerClass(selector, imageNumber = 0) {

imageNumber += 1;
  if (imageNumber === 1) {
    selector.classList.add('home-content-1');
  }

  if (imageNumber === 2) {
    selector.classList.add('home-content-2');
  }

  if (imageNumber === 3) {
    selector.classList.add('home-content-3');
  }

  if (imageNumber === 4) {
    selector.classList.add('home-content-4');
    imageNumber = 0;
  }

  setTimeout(() => addHomeInnerClass(selector, imageNumber), 1000);
}

document.addEventListener('DOMContentLoaded', function() {
  const homeInner = document.querySelector('.home-inner');

  addHomeInnerClass(homeInner, 0);

});

Here's my HTML section for the same:

<section class="home" id="home">
    <div class="home-inner">

    </div>
</section>

Here's my CSS3:

.home {
    background-image: linear-gradient(to right, #ff5517 0%, #ff7000 40%, #db1d5e 80%);
    height: 88.98vh;

    .home-content-1 {
      height: 98%;
      border-bottom-right-radius: 20rem;
      background: linear-gradient(to right, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.3) 40%, rgba(0, 0, 0, 0.9) 80%), url("/app/assets/images/slider/ (2).jpg") no-repeat center center/cover;
      z-index: 1;
    }

    .home-content-2 {
      height: 98%;
      border-bottom-right-radius: 20rem;
      background: linear-gradient(to right, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.3) 40%, rgba(0, 0, 0, 0.9) 80%), url("/app/assets/images/slider/ (3).jpg") no-repeat center center/cover;
      z-index: 1;
    }

    .home-content-3 {
      height: 98%;
      border-bottom-right-radius: 20rem;
      background: linear-gradient(to right, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.3) 40%, rgba(0, 0, 0, 0.9) 80%), url("/app/assets/images/slider/(4).jpg") no-repeat center center/cover;
      z-index: 1;
    }

    .home-content-4 {
      height: 98%;
      border-bottom-right-radius: 20rem;
      background: linear-gradient(to right, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.3) 40%, rgba(0, 0, 0, 0.9) 80%), url("/app/assets/images/slider/ (1).jpg") no-repeat center center/cover;
      z-index: 1;
    }
  }

I know CSS & HTML code hardly matter here but if I could get some other method to do what I want to, that would be great.

What I want to do? Use pure javascript to get the fade in and fadeout image effect.

Where am I stuck? Cannot figure out how to run setTimeOut infinite times?

NOTE: I don't want to use any third party library. It's a learning project.

Upvotes: 0

Views: 67

Answers (2)

T.J. Crowder
T.J. Crowder

Reputation: 1074038

As I said in a comment, the problem isn't that the timer stops running. It's that you're not removing the old classes when you add the new one. Here's how you could do that while also simplifying the code:

function addHomeInnerClass(selector, imageNumber = 0) {

  selector.classList.remove('home-content-' + imageNumber);
  imageNumber = imageNumber % 4 + 1;
  selector.classList.add('home-content-' + imageNumber);

  setTimeout(() => addHomeInnerClass(selector, imageNumber), 1000);
}

Live Example (I modified the CSS at bit to make it easy to see the changes; I also added the missing } after the .home rule):

function addHomeInnerClass(selector, imageNumber = 0) {

  selector.classList.remove('home-content-' + imageNumber);
  imageNumber = imageNumber % 4 + 1;
  selector.classList.add('home-content-' + imageNumber);

  setTimeout(() => addHomeInnerClass(selector, imageNumber), 1000);
}

document.addEventListener('DOMContentLoaded', function() {
  const homeInner = document.querySelector('.home-inner');

  addHomeInnerClass(homeInner, 0);

});
.home {
    height: 88.98vh;
}
    .home-content-1 {
      height: 98%;
      border-bottom-right-radius: 20rem;
      background: url("https://via.placeholder.com/100/0000C0/FFFFFF?text=1") no-repeat center center/cover;
      z-index: 1;
    }

    .home-content-2 {
      height: 98%;
      border-bottom-right-radius: 20rem;
      background: url("https://via.placeholder.com/100/0000C0/FFFFFF?text=2") no-repeat center center/cover;
      z-index: 1;
    }

    .home-content-3 {
      height: 98%;
      border-bottom-right-radius: 20rem;
      background: url("https://via.placeholder.com/100/0000C0/FFFFFF?text=3") no-repeat center center/cover;
      z-index: 1;
    }

    .home-content-4 {
      height: 98%;
      border-bottom-right-radius: 20rem;
      background:  url("https://via.placeholder.com/100/0000C0/FFFFFF?text=4") no-repeat center center/cover;
      z-index: 1;
    }
  }
<section class="home" id="home">
    <div class="home-inner">

    </div>
</section>

Upvotes: 2

Jb31
Jb31

Reputation: 1391

As suggested in the comments, setInterval is exactly tailored for your needs. It allows you to run a function (like addHomeInnerClass in your case) every x milliseconds. Please note however that using this function requires you to change your imageNumber logic a bit. Additionally, as mentioned in the comments as well, you should remove the old classes before adding new ones.

I would suggest the following approach:

let imageNumber = 0;
function addHomeInnerClass(selector) {
  selector.classList.remove('home-content-' + imageNumber);
  imageNumber++;
  if(imageNumber === 5) imageNumber = 1;
  selector.classList.add('home-content-' + imageNumber);
}

document.addEventListener('DOMContentLoaded', function() {
  const homeInner = document.querySelector('.home-inner');

  setInterval(() => addHomeInnerClass(homeInner), 1000);
});

Upvotes: 0

Related Questions