2

I am creating a web widget where I am trying to load images from the multiple directories based on the option selected from the drop-down list. If I select option 1, it should pick the first directory and loads the images from that directory with an interval of 7 seconds. If I select Option 2, it should select a different directory and loads images from that directory with an interval of 7 seconds. I am using setInterval option in Javascript. When I select the option 1, it works fine and loads images one by one with the time interval of 7 seconds but when I select the option 2 in the drop-down list the time interval gets reduced from 7 seconds. I tried using clearInterval by following a few solutions but it didn't work for me. I also referred How do I correctly use setInterval and clearInterval to switch between two different functions?.

Below is my code :

selectCity.addEventListener("change", () => {

    celeb.src = `${directory}/image1.png`;
    
    images = [];

    images[0] = `/${directory}/image1.png`;
    images[1] = `/${directory}/image2.png`;
    images[2] = `/${directory}/image3.png`;

    var setint = window.setInterval(changeImage, 7000);
    var x = 1;

    function changeImage() {
      celeb.src = images[x];
      console.log(images[x]);
      x++;
      if (images.length == x) {
        x = 0;
        window.clearInterval(setint);
        setint = window.setInterval(changeImage, 7000);
      }     
    }
}

I want to use clearInterval, once selectCity gets changed. I am beginner to HTML and Javascript. Please suggest what am I doing wrong in this code.

Supriya
  • 23
  • 5
  • 2
    I think you should use `setTimeout()` instead. It seems like the Interval is less than 7 seconds, but I think it's just more than one running in parallel... – iAmOren Jun 23 '20 at 23:46
  • Thank you for your reply! I am sorry I was not clear with my question. I tried setTimeout and it stops after loading the first image. I have updated my question. Can you please help with that? – Supriya Jun 24 '20 at 02:09
  • Oh - I just noticed! You didn't close the `selectCity.addEventListener(` function! - at the very end of the code! – iAmOren Jun 24 '20 at 12:01
  • You are not using `select.selectedIndex` to change directory of images. Also, what's the code you're using for that - `images`? – iAmOren Jun 24 '20 at 12:04
  • @iAmOren I have added the code for images. I am changing the directory when I am selecting an option from dropdown list. The thing is it is picking the images correctly from the different directory when I am changing the option but the problem I am facing is with the time span between the images is getting reduced from 7 seconds for the new directory. – Supriya Jun 24 '20 at 19:09
  • It's hard to go back and forth here... – iAmOren Jun 24 '20 at 19:18

1 Answers1

1

Generally:

  • Use setInterval if you need a continuous call to a function.
  • Use setTimeout if you want to delay the calling of a function.

And in your case. You want change the picture with delay if selectCity is changed. Therefore use setTimeout instead.

Example:

let currentIndex = 0

selectCity.addEventListener('change', () => {
  setTimeout(() => {
    if (images.length < currentIndex) {
      celeb.src = images[currentIndex]
      currentIndex += 1
    }
  }, 7000)
})

Test setTimeout in your browser:

document.getElementsByTagName('button')[0].addEventListener('click', function() {
  setTimeout(() => console.log('Clicked'), 5000)
})
<button>Console after 5 seconds</button>
Laode Muhammad Al Fatih
  • 3,994
  • 1
  • 18
  • 32
  • Thank you for your reply! I am sorry I was not clear with my question. I tried setTimeout and it stops after loading the first image. I have updated my question. Can you please help with that? – Supriya Jun 24 '20 at 02:08