Javascript clearInterval 不重置倒计时值

Question

我正在制作滑动滑块。我的目标是有一个倒计时，在每次幻灯片更改时重置其值。如果幻灯片自动更改，则倒计时会重新设置并在下一张幻灯片上再次开始倒计时。问题是，如果我单击导航点，则会出现某种双重倒计时。我认为 clearInterval 会启动另一个倒计时，但不会从线程执行中删除之前的倒计时。

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();
    });
}

有人可以帮我解决发生了什么事吗？

Answer 1

使 timer 成为一个全局变量，这样当你尝试使用它时它就不会忘记它的值（局部变量不保留它们的值，所以当你再次调用一个函数时，timer 开始为 undefined)。也许明确条件，所以它不会尝试在 none （第一次调用）时停止计时器：

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

Answer 2

在你的情况下 timer 仍未声明并且未定义

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()

因此您必须声明 timer 超出函数范围 elipse 没有必要成为刚超出范围的全局变量例如：

(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().

而setIntervalReturn值是一个非零数值

所以我认为undefined不会造成麻烦

Javascript clearInterval 不重置倒计时值

Javascript clearInterval not reseting countdown value

javascript

countdown

clearinterval

swiper.js