The countdown value in Javascript is not being reset when clearInterval is called

Question

The countdown value in Javascript is not being reset when clearInterval is called

Currently, I am working on implementing a swiper slider with a countdown feature that resets its value every time a slide change occurs. The countdown should restart when the next slide is displayed automatically. However, I have encountered an issue where clicking on the navigation dots results in a double countdown effect. It seems like the clearInterval function initiates another countdown without properly removing the previous countdowns from the thread execution.

var autoplay = 20000;
var swiper = new Swiper('.swiper-container', {
    pagination: '.swiper-pagination',
    paginationClickable: true,
    watchSlidesProgress: true,
    autoplay: 20000,
    onProgress: elipse
});

function elipse() {
    clearInterval(timer);
    var countdownNumberEl = document.getElementById('countdown-number');
    var countdown = 20;
    countdownNumberEl.textContent = countdown;
    var timer = setInterval(frame, 1000);
    function frame(){
        countdown = --countdown <= 0 ? 20 : countdown;
        countdownNumberEl.textContent = countdown;
    }
}

var swiperBullet = document.getElementsByClassName("swiper-pagination-bullet");
for (var i = 0; i < swiperBullet.length; i++) {
    swiperBullet[i].addEventListener('click', function () {
        elipse();
    });
}

I would appreciate any assistance in resolving this issue and understanding what is causing it.

javascript countdown clearinterval swiper.js

Answer 1

Answer №1

Ensure that the variable timer is declared globally to maintain its value, as local variables reset each time a function is called. To prevent errors when trying to stop a non-existent timer, consider adding a clear conditional in your code:

var timer = false;
function ellipse() {
  if(timer !== false) {
    clearInterval(timer);
  }
  [...]
  timer = setInterval(frame, 1000);

Answer 2

Ensure that the variable timer is declared globally to maintain its value, as local variables reset each time a function is called. To prevent errors when trying to stop a non-existent timer, consider adding a clear conditional in your code:

var timer = false;
function ellipse() {
  if(timer !== false) {
    clearInterval(timer);
  }
  [...]
  timer = setInterval(frame, 1000);

Answer 3

Answer №2

It seems that in this scenario, the variable timer has not been declared and remains undefined.

function elipse() {
    //timer will be undefined or throw error that is not declared
    //so you are not clearing anything
    console.log(timer);
    clearInterval(timer);
    //stuff

    //this wil redaclare timer every time you enter the function and it will return different intervalID
    //so this will grow exponentially
    var timer = setInterval(function () {
        elipse()
    }, 1000);
}
elipse()

In order to rectify this issue, it is advised to declare timer outside of the scope for the function elipse. It does not need to be a global variable; just place it outside of the scope like so:

(function () {
  var timer;
  function elipse() {
      //only the first time will be undefined
      console.log(timer);
      clearInterval(timer);
      //just don't redeclared timer becouse it will be for this scope and it will create a new intervalID that you can't access
      timer = setInterval(function () {
          elipse()
      }, 1000);
  }
  elipse()
})();

P.S. clearInterval expects intervalID

The identifier of the repeated action you want to cancel. This ID was returned by the corresponding call to setInterval().

Additionally, the Return value of setInterval is a numeric, non-zero value

Therefore, having undefined as the value may not pose any significant issues

Answer 4

It seems that in this scenario, the variable timer has not been declared and remains undefined.

function elipse() {
    //timer will be undefined or throw error that is not declared
    //so you are not clearing anything
    console.log(timer);
    clearInterval(timer);
    //stuff

    //this wil redaclare timer every time you enter the function and it will return different intervalID
    //so this will grow exponentially
    var timer = setInterval(function () {
        elipse()
    }, 1000);
}
elipse()

In order to rectify this issue, it is advised to declare timer outside of the scope for the function elipse. It does not need to be a global variable; just place it outside of the scope like so:

(function () {
  var timer;
  function elipse() {
      //only the first time will be undefined
      console.log(timer);
      clearInterval(timer);
      //just don't redeclared timer becouse it will be for this scope and it will create a new intervalID that you can't access
      timer = setInterval(function () {
          elipse()
      }, 1000);
  }
  elipse()
})();

P.S. clearInterval expects intervalID

The identifier of the repeated action you want to cancel. This ID was returned by the corresponding call to setInterval().

Additionally, the Return value of setInterval is a numeric, non-zero value

Therefore, having undefined as the value may not pose any significant issues

The countdown value in Javascript is not being reset when clearInterval is called

Answer №1

Answer №2

Similar questions

Dealing with event delegation on elements that are not nested

One function is failing to execute properly due to multiple if conditions

Ways to use the v-if directive to render conditionally based on a property, even if the object may be undefined

Utilize Aframe to easily view and upload local gltf files

What is the most efficient method for managing axios errors in Laravel and Vue.js?

The display of temporary headers - Nodemailer - AJAX

Creating a Select component in React without relying on the Material-UI library involves customizing a dropdown

The form features a "Select all" button alongside a series of checkboxes for multiple-choice options

What is the best way to retrieve local variables within a React function?

What could be causing my JavaScript loop to replace existing entries in my object?

Using THREE.js: Object3D Dimension Shrinkage

Displaying directory contents with JavaScript XHR

Guide to dynamically add data to two columns

Validating Linkedin URLs with JavaScript for Input Fields

What is the best way to retrieve a specific value from a nested array that is within an array of objects

Verifying X-editable input in Laravel (Server-side)

Deleting a specific element in React: Step-by-step guide

challenges surrounding the use of getElementByTagName

Invalid element type detected. A string was expected, but instead found undefined

Is there a way to apply a setTimeout to a <div> element upon the first click, but not on subsequent clicks?