Javascript clearInterval 不重置倒计时值答案

【问题标题】：Javascript clearInterval not reseting countdown valueJavascript clearInterval 不重置倒计时值
【发布时间】：2021-02-09 09:00:30
【问题描述】：

我正在制作一个滑动滑块。我的目标是进行倒计时，在每次幻灯片更改时重置其值。如果幻灯片自动更改，倒计时重置很好，并在下一张幻灯片上再次开始倒计时。问题是，如果我点击导航点，那么我会有某种双重倒计时。我认为 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();
    });
}

有人可以帮我解决这是怎么回事吗？

【问题讨论】：

您的变量timer 仅在elipse 函数的范围内可用。
如果我改变定时器变量的范围，结果是一样的。我已经试过了。
您的clearInterval 不在函数或任何东西中。它在您的 elipse 函数启动间隔之前执行。
@AndréCastro 在elipse() 之前声明计时器并将var timer = setInterval(frame, 1000); 更改为timer = setInterval(frame, 1000);
现在可以了。非常感谢@angel.bonev。问题是计时器不是全局的。解决了。也非常感谢所有做出贡献的人。

标签： javascript countdown clearinterval swiper.js

【解决方案1】：

将timer设为全局变量，这样在你尝试使用它的时候它就不会忘记它的值（局部变量不会保持它们的值，所以当你再次调用一个函数时，timer以@开头987654324@)。也许让 clear 有条件，所以它不会尝试在没有计时器时停止计时器（第一次调用）：

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

【讨论】：

你有我的赞成票，但为什么你需要检查if(timer !== false) { 不要认为intervalID 永远不会是false
@angel.bonev 当函数第一次被调用时，没有计时器运行。仅通过查看developer.mozilla.org/en-US/docs/Web/API/…，我无法确定向clearInterval() 提供无效标识符是否真的适用于所有环境，尽管对于浏览器来说可能没问题。
是的，他们说但是，为了清楚起见，您应该避免这样做。

【解决方案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()
})();

附： clearInterval 需要间隔ID

您要取消的重复操作的标识符。此 ID 由对 setInterval() 的相应调用返回。

而setInterval 返回值是一个数字的非零值

所以在我看来undefined不会造成麻烦

【讨论】：