当我按下停止按钮时，我将如何清除间隔？

Question

我真的是 javaScript 编程的新手，所以我才刚刚开始学习它，如果你能使用简单的 js 代码回复就好了
当我按下停止时我的代码不会停止我想清除我用 myTimer 命名的间隔如果我没有将 setInterval 放在函数中它只是直接工作如果有任何方法可以使我的代码更短请提及它.

const // my variable
  myHour = document.getElementById("hours"),
  myMin = document.getElementById("min"),
  mySecond = document.getElementById("second"),
  myMiliSecond = document.getElementById("dsecond"),
  startchrono = document.getElementById("start"),
  getLap = document.getElementById("lap"),
  stopchrono = document.getElementById("stop"),
  resetchrono = document.getElementById("reset"),
  result = document.getElementById("result");
let // variable
  milisecond = 0,
  second = 0,
  minute = 0,
  hour = 0,
  chronoRun = false,
  round = 0;

function decoration(item) // this function is for add 0 if second or minute less than 10
  {
  if (String(item).length < 2) {
    item = "0" + item;
  }
  return item;
}

function lapset() // function that create a new row in the table to save rounds
 {
  round++;
  let // decoration add 0 if number under 10
    ds = decoration(milisecond),
    s = decoration(second),
    m = decoration(minute),
    h = decoration(hour);
  if (round <= 10) {
    const // insert the row in table
      tr = result.insertRow(-1);
    tr.insertCell(0).innerHTML = round;
    tr.insertCell(-1).innerHTML = h + ":" + m + ":" + s + ":" + ds;
  } else if (round <= 11) {
    tr = result.insertRow(-1);
    tr.insertCell(-0).innerHTML = "-";
    tr.insertCell(-1).innerHTML = "you can't add any more laps";
    getLap.setAttribute("disabled", "true");
  }
}

function chrono() //chrono start 
  {
  // chrono
  milisecond++;

  // make sure that minute, second have to be less than 60
  if (milisecond > 10) {
    milisecond = 0;
    second++;
  }
  if (second > 59) {
    second = 0;
    minute++;
  }
  if (minute > 59) {
    minute = 0;
    hour++;
  }
  let // decoration add 0 if number under 10
    ds = decoration(milisecond),
    s = decoration(second),
    m = decoration(minute),
    h = decoration(hour);

  myMiliSecond.innerHTML = ds;
  mySecond.innerHTML = s;
  myMin.innerHTML = m;
  myHour.innerHTML = h;
  startchrono.setAttribute("disabled", "true");
}
// function chronoStarts() {}
const myTimer = () => {
  setInterval(chrono, 100);
};

const test = () => {
  return clearInterval(myTimer);
};
startchrono.addEventListener("click", myTimer);
getLap.addEventListener("click", lapset);
stopchrono.addEventListener("click", test);

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="chrono">
      <div id="timer">
        <span id="hours" class="time">00</span>
        <span class="sep">:</span>
        <span id="min" class="time">00</span>
        <span class="sep">:</span>
        <span id="second" class="time">00</span>
        <span class="sep">:</span>
        <span id="dsecond" class="time">00</span>
      </div>
      <div id="btnarea">
        <button id="start" class="btnevent">start</button>
        <button id="lap" class="btnevent">lap</button>
        <button id="stop" class="btnevent">stop</button>
        <button id="reset" class="btnevent">reset</button>
      </div>
      <table id="result">
        <caption>saved lap</caption>
        <tbody>
          <tr>
            <th class="round">round</th>
            <th class="laptime">time</th>
          </tr>
        </tbody>
      </table>
    </div>
    <script src="newpagescript.js"></script>
  </body>
</html>

这是我的 html 代码，我认为我的代码一切正常，但如果有任何问题，我正在寻找 adives

Answer 1

您需要获取 setInterval 函数的 return 值，然后将该值作为参数传递给 clearInterval 函数。例如，见下：

`// function chronoStarts() {}
let intervalId = 0;

const myTimer = () => {intervalId = setInterval(chrono, 100);};

const test = () => {
    clearInterval(intervalId);
};

startchrono.addEventListener("click", myTimer);
getLap.addEventListener("click", lapset);
stopchrono.addEventListener("click", test);`

当我按下停止按钮时，我将如何清除间隔？

how i am going to clearInterval when i press stop btn?

html

javascript

setinterval

clearinterval

web