如何清除函数中的 setInterval

Question

你好，我有一个问题。

有谁知道，为什么我的“clearInterval”在点击后不起作用？

"use strict";
let activeCount = 0;
let switcher = document.getElementById("counter__switcher");
let counter = document.getElementById("counter__number");

counter.innerText = "0";
let parsed = parseInt(counter.innerText);

switcher.addEventListener("click", function(e) {
    if(activeCount == 0) {
    counter.classList.toggle("d-block");
    e = setInterval(function() {
        counter.innerText = parsed++;
    },1000)
    activeCount = 1;
    console.log(activeCount)
    }
    else {
        window.clearInterval(e);
    }
})

Answer 1

你在这里做错了很多事情。

首先，变量 e 中存储了事件数据（如点击的坐标），因此您不应将其重新分配以携带另一个不相关的值。其次，由于您是在回调函数中访问它，因此需要牢记两点，首先，包含超时的变量应该是全局变量，不应分配其他值。

在您的示例中，一旦函数完成，包含超时的变量 e 将被销毁/垃圾收集。而当回调函数再次为运行时，变量e携带的是事件对象，而不是可以传递给clearInterval的timeout。

要做到这一点，请使用 let someTimeout; 正确声明全局变量并为其赋值或相应地在回调函数中调用 clearInterval。

这是一个编辑过的例子：

"use strict";
let activeCount = 0;
let switcher = document.getElementById("counter__switcher");
let counter = document.getElementById("counter__number");
let myTimeout;

counter.innerText = "0";
let parsed = parseInt(counter.innerText);

switcher.addEventListener("click", function(e) {
    if(activeCount == 0) {
    counter.classList.toggle("d-block");
    myTimeout = setInterval(function() {
        counter.innerText = parsed++;
    },1000)
    activeCount = 1;
    console.log(activeCount)
    }
    else {
        window.clearInterval(myTimeout);
    }
})

Answer 2

您应该在点击处理程序之外声明间隔

let switcher = document.getElementById("counter__switcher");
let counter = document.getElementById("counter__number");

counter.innerText = "0";
let parsed = parseInt(counter.innerText);
let interval;

switcher.addEventListener("click", function() {
  if (!interval) {
    counter.classList.toggle("d-block");
    interval = setInterval(function() {
      counter.innerText = parsed++;
    }, 1000)
  } else {
    clearInterval(interval);
    // setting this to undefined so that you can resume the counter
    interval = undefined;
  }
})

<div>
  <span id="counter__number"></span>
  <button id="counter__switcher">switch</button>
</div>

在您的代码中，e 参数将包含事件并且您正在用间隔覆盖它，后续点击将到达 else 块，但这次 e 将没有间隔这将是一个新事件。

如何清除函数中的 setInterval

How to clear setInterval in a Function

javascript

setinterval