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

Discovering additional element information while utilizing the 'Sortable' feature

Using JQUERY, CodeMirror adds elements to the HTML editor

Setting fixed width for table headers in Bootstrap 3

When attempting to transfer data from the parent component to child components, the data is appearing as undefined in the display

Creating a Dropdown list using Javascript

Upgrading the entire document's content using jQuery

The AngularJS modal is sending back the results before updating the parent scope

Vue does not consistently update HTML when the reference value changes

The issue with updating the menu class in Internet Explorer 8 is not being resolved

ensure that html tags display properly when retrieved from json in an angular directive template

The system does not acknowledge "ENVIRONMENT" as a command that can be executed either internally or externally, or as a batch file that can be

Conceal All Other Divs upon Clicking on a New Div Bearing the Identical Class

Error occurs in ReactJS App when the state is updated in Redux only after dispatching the same action twice

Retrieving the class name using jQuery

The tension settings in Chart.JS appear unusual

Dealing with AJAX error in pure JavaScript

The user_login view in the account views did not provide an HttpResponse object, but instead returned None

Setting the default type of an array in props in Vue 2 is a common need for many developers

In Node.js, the mongodb+srv URI does not support including a port number

Combining divs with identical values in Angular