Seeking assistance with implementing setInterval and clearInterval functionalities in JavaScript programming

Question

Seeking assistance with implementing setInterval and clearInterval functionalities in JavaScript programming

I'm currently working on a web widget that loads images from different directories based on the selection made in a drop-down list. If "Option 1" is chosen, it should fetch images from one directory at 7-second intervals. Choosing "Option 2" selects a different directory for image loading, also at 7-second intervals. I've implemented setInterval in JavaScript to achieve this functionality. While Option 1 works smoothly with the correct time interval, selecting Option 2 causes the interval to decrease from 7 seconds. I attempted to use clearInterval following various solutions, including guidance from this resource, but without success.

Here's a snippet of 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'm looking to utilize clearInterval each time "selectCity" changes. As a newcomer to HTML and JavaScript, I would appreciate any advice or suggestions on what might be wrong with my code.

javascript

Answer 1

Answer №1

Generally speaking:

If you require a function to be called continuously, use the setInterval method.
On the other hand, if you wish to delay the execution of a function, opt for the setTimeout method.

In your specific scenario, where you need to change an image with a delay when the value of selectCity changes, it is recommended to utilize setTimeout.

Here's an example:

let currentIndex = 0

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

Try using setTimeout in your browser:

document.getElementsByTagName('button')[0].addEventListener('click', function() {
  setTimeout(() => console.log('Clicked'), 5000)
})

<button>Console after 5 seconds</button>

Answer 2

Generally speaking:

If you require a function to be called continuously, use the setInterval method.
On the other hand, if you wish to delay the execution of a function, opt for the setTimeout method.

In your specific scenario, where you need to change an image with a delay when the value of selectCity changes, it is recommended to utilize setTimeout.

Here's an example:

let currentIndex = 0

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

Try using setTimeout in your browser:

document.getElementsByTagName('button')[0].addEventListener('click', function() {
  setTimeout(() => console.log('Clicked'), 5000)
})

<button>Console after 5 seconds</button>

Seeking assistance with implementing setInterval and clearInterval functionalities in JavaScript programming

Answer №1

Similar questions

Are jQuery plugins offering accessible public functions?

Outline a table element without altering the dimensions of the cell

Hover effect for Twitter-like buttons

"jQuery Hide-and-Seek: A Fun Way to Manip

Use Google Maps filters in combination with checkboxes

What is the proper way to enable the Google Analytics cookie only once another consent cookie has been set and is marked as "true"?

The method item.appendChild does not exist as a function

Tips for maintaining the visibility of the dynamic submenu while hovering over either the parent menu or submenu in vuejs

When beginning a new React project, I encounter this issue

Exploring Vue.js3: Simplifying Nested Array Filtering

Generate a fresh object with distinct identifiers

Automatically generate the first user on the Parse Server system

Steps for fixing the error "Fixing the MongooseServerSelectionError: Incorrect message size while trying to connect to MongoDB

Countdown timer that counts down in reverse when the browser is minimized

How can I place a new ThreeJS child element at the front and center of a scene?

Retrieving the content of a dynamic template with Angular-UI-Router

The subsequent menu selection will be based on the chosen menu value

Utilize the Bootstrap responsive grid system to ensure that every row is filled with content, creating

Encountering a 404 error while using THREE.ImageUtils.loadTexture in three.js

Using Express to Deliver Static Content to Subdirectories