javascript 中的 Clearinterval 范围问题

Question

在同一函数中删除间隔时遇到问题。

我设置的代码如下：

let $start = document.querySelector('#start');
let $stop = document.querySelector('#stop');

function myFn() {
  let t = event.target.id;

  let logsetInterval = setInterval(() => {
    console.log('interval running');
  }, 2000);

  if (t === "stop") {
    clearInterval(logsetInterval);
  }
}

$stop.addEventListener('click', function() {
  myFn()
});

$start.addEventListener('click', function() {
  myFn()
});

<button id="start">start</button>
<button id="stop">stop</button>

我需要它在同一个函数中... 我在这里做错了什么。

Answer 1

你的问题听起来像是来自你的功能范围和它周围的全局机制
每次您调用函数 myFn 时都会创建一个新的时间间隔，它可以是开始时间也可以是停止时间。而且只有在停止时才清楚。

您可能应该将间隔设置为全局变量，然后才修改它。

let $start = document.querySelector('#start');
let $stop = document.querySelector('#stop');

let logsetInterval;

function myFn() {
  let t = event.target.id;

  if (logsetInterval) clearInterval(logsetInterval); // if interval already exists, clean it

  logsetInterval = setInterval(() => {
    console.log('interval running');
  }, 2000);

  if (t === "stop") {
    clearInterval(logsetInterval);
  }
}

$stop.addEventListener('click', function() {
  myFn()
});

$start.addEventListener('click', function() {
  myFn()
});

希望我理解你的问题

javascript 中的 Clearinterval 范围问题

Clearinterval scoped issue in javascript

javascript

setinterval

clearinterval