Time whizzes by too swiftly

Question

Time whizzes by too swiftly

After attempting to create an automated slideshow with clickable buttons, I encountered a problem. The slideshow functions properly, but as soon as I click one of the buttons, the slideshow speeds up significantly.

This is what I implemented in my attempt:

<script>
  var slideIndex = 0;
  showSlides(slideIndex);

  function plusSlides(n) {
    showSlides(slideIndex += n);
  }

  function currentSlide(n) {
    showSlides(slideIndex = n);
  }

  function showSlides() {
    var i;
    var slides = document.getElementsByClassName("mySlides");
    var dots = document.getElementsByClassName("button");

    for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";
    }
    slideIndex++;

    if (slideIndex > slides.length) { slideIndex = 1 }

    for (i = 0; i < dots.length; i++) {
      dots[i].className = dots[i].className.replace(" active", "");
    }

    slides[slideIndex - 1].style.display = "block";
    dots[slideIndex - 1].className += " active";
    setTimeout(showSlides, 5000); // Change image every 10 seconds
  }
</script>

Can anyone explain why the slideshow becomes erratic when clicking on the buttons for specific slides?

Below is the HTML code used:

<div class="wrapper">
  <span class="button button1" onclick="currentSlide(0)"></span>
  <span class="button button2" onclick="currentSlide(1)"></span>
  <span class="button button3" onclick="currentSlide(2)"></span>
</div>

<!--Slideshow images-->
<div class="slideshow-container">
  <div class="mySlides Fade">
    <img src="homeScreen/teslaRoadster.jpg" style="width:100%">
    <div class="centered-text"> Customize Your Own Car</div>
    <button class="btnCustom">
      <a id="costumLink" href="#custom">Customize</a>
    </button>

  </div>

  <div class="mySlides Fade">
    <img src="homeScreen/modelXHomeScreen.jpg" style="width:100%">
    <div class="top-left"> MODEL X</div>
    <button class="btnModelX">
      <a id="costumLink" href="#modelx">Order Now</a>
    </button>
  </div>

  <div class="mySlides Fade">
    <img src="homeScreen/cybertruckHomeScreen.jpg" style="width:100%">
    <div class="centered-text">The Future Is Now</div>
    <button class="btnCyberTruck">
      <a id="costumLink" href="#cybertruck">Order Now</a>
    </button>
  </div>
</div>

javascript html css

Answer 1

Answer №1

When your showSlides() function is called, it initiates a timer which then triggers another call to showSlides(), creating a stack of function calls that execute one after the other.

To prevent this stacking behavior, it is essential to maintain a reference to the current timer and ensure that before starting a new timer, the previous one is stopped using clearTimeout(). The code snippet below demonstrates how this can be achieved, guaranteeing only one timer is active at any given time:

var timer = null; // Variable to store timer reference

function showSlides() {

  // Clear any existing timer
  clearTimeout(timer);

  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("button");

  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }
  slideIndex++;

  if (slideIndex > slides.length) {slideIndex = 1}

  for (i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace(" active", "");
  }

  slides[slideIndex-1].style.display = "block";
  dots[slideIndex-1].className += " active";
  timer = setTimeout(showSlides, 5000); // Store updated timer reference
}

Answer 2

When your showSlides() function is called, it initiates a timer which then triggers another call to showSlides(), creating a stack of function calls that execute one after the other.

To prevent this stacking behavior, it is essential to maintain a reference to the current timer and ensure that before starting a new timer, the previous one is stopped using clearTimeout(). The code snippet below demonstrates how this can be achieved, guaranteeing only one timer is active at any given time:

var timer = null; // Variable to store timer reference

function showSlides() {

  // Clear any existing timer
  clearTimeout(timer);

  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("button");

  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }
  slideIndex++;

  if (slideIndex > slides.length) {slideIndex = 1}

  for (i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace(" active", "");
  }

  slides[slideIndex-1].style.display = "block";
  dots[slideIndex-1].className += " active";
  timer = setTimeout(showSlides, 5000); // Store updated timer reference
}

Time whizzes by too swiftly

Answer №1

Similar questions

CSS: Achieving vertical centering without specifying a fixed height using line-height. Is it possible?

Is there a mistake in the way I am creating a horizontal navigation bar?

An illustration of the fundamental concepts of require.js

Finding the final day of a specific year using the moment library

A loop in JavaScript/TypeScript that runs precisely once every minute

Is it possible to obtain a return value from Electron's webContents.executeJavaScript when NodeIntegration is disabled?

What is the best way to make this CSS arrow see-through?

Issue with Google Maps iFrame not loading when utilizing JavaScript variables in the "src" attribute

Instructions for adding a new line in a textarea on Internet Explorer when reading from a file

Can the geocoder API/search box be utilized to locate specific markers on a map?

When a user right-clicks on certain words, the menu opens using JavaScript

Extracting JSON Data into Text Boxes within jQuery UI Dialogs

Interact with one div to trigger changes in another (CSS)

Creating a dynamic input box that appears when another input box is being filled

Discover the method to adjust the position of elements, such as images, using radio buttons

modify the color of a box within a grid upon clicking it

React-select is failing to align properly with flexbox styling

JavaScript - returning a false error

Struggling to comprehend certain sections of code within AngularJS

Errors that occur when parsing templates in Angular 2