JS如何清除setInterval，不允许setInterval重复？

Question

我正在制作一个简单的 HTML/CSS/JS 程序，其中会出现红绿灯。有两个按钮 - “自动”和“手动”。如果你点击“自动”，你应该会看到红绿灯自己闪烁颜色。我用 setInterval 实现了这个。如果你点击“手动”，你就意味着能够将控制切换到手动并且只能手动更改颜色。我是 Javascript 的新手，我目前运行遇到的问题是，当我从“自动”切换到“手动”时，setInterval 会持续到运行，因此交通灯会改变颜色一按手动，但灯也继续自己改变。此外，可以单击“自动”按钮两次，这意味着您按下它的次数越多，颜色就会开始快速变化，因为 setInterval 开始被多次调用。

HTML:

<html>
  <head>
    <title>Traffic Lights</title>
    <link rel="retylesheet" type="text/css" href="css/restyle.css"/>
    <link rel="stylesheet" type="text/css" href="traffic.css"/>
  </head>
  <body>
    <a class="auto">Auto</a>
    <div class="trafficlight">
      <div class="circle red" color="red"></div>
      <div class="circle orange" color="orange"></div>
      <div class="circle green" color="green"></div>
    </div>
    <a class="manual">Manual</a>
  </body>
  <script type="text/javascript" src="traffic.js"></script>
</html>

CSS:

* {
  box-sizing: border-box;
}

body{
  background-color:#eb3456;
  min-height:100vh;
  margin:0;
  display:flex;
  align-items:center;
  justify-content:center;
}
.circle{
  border-radius:50%;
  position:relative;
  height:80px;
  width:80px;
  background-color:rgba(0,0,0,0.3);
}

.trafficlight{
  display: flex;
  align-items:center;
  justify-content: space-between;
  flex-direction: column;
  padding:30px;
  width:150px;
  height:400px;
  background-color: #A9A9A9;
}

.circle.red{
  background-color: red;
  box-shadow: 0 0 40px 10px red;
}
.circle.orange{
  background-color: orange;
  box-shadow: 0 0 40px 10px orange;
}
.circle.green{
  background-color: green;
  box-shadow: 0 0 40px 10px green;
}
a{
  background-color: #A9A9A9;
  color: white;
  padding: 7px 12px;
  text-align: center;
  text-decoration: none;
  margin: 10px;
  cursor:pointer;
}
a:hover, a:active{
  background-color: #545252;
}

JS:

const circles = document.querySelectorAll(".circle");
const auto = document.querySelector(".auto");
const manual = document.querySelector(".manual");
let active=0;
function changeLight(){
  circles[active].className="circle";
  active++;
  if(active>2){
    active=0;
  }
  const current=circles[active];

  current.classList.add(current.getAttribute("color"));
}
auto.onclick = function(){
  setInterval(changeLight,1000);
}
manual.onclick = function(){
  clearInterval();
  changeLight();
}

我已经尝试查找它，但我找不到任何关于如何停止允许 .onclick 能够被使用两次，或者为什么在按下手动时 clearInterval() 不起作用的任何信息。任何关于如何通过在计算机和用户之间切换控制来让这两个按钮工作的帮助都会很棒 - 这是我第一天使用 JS。

Answer 1

你可以将setInterval赋值给一个变量，这将保存你可以稍后清除的间隔id，例如：

const lightItrvl;
auto.onclick = function(){
  lightItrvl = setInterval(changeLight,1000);
}

现在您可以使用 clearInterval 方法清除此 setInterval 实例

clearInterval(lightItrvl)

浏览器可以有多个 setInterval 实例，而 clearInterval() 不是合适的语法，因此您需要将 intervalId 传递给此方法。您的代码中缺少此内容。

请在 SO 上检查这个已经回答的问题

Answer 2

请检查此脚本。我想这就是你需要的

const circles = document.querySelectorAll(".circle");
const auto = document.querySelector(".auto");
const manual = document.querySelector(".manual");
let active=0;

let isAuto= false;
let autofunction;

function changeLight(){
  circles[active].className="circle";
  active++;
  if(active>2){
    active=0;
  }
  const current=circles[active];

  current.classList.add(current.getAttribute("color"));
}
auto.onclick = function(){
    isAuto = true

    if(autofunction == undefined){
     autofunction =  setInterval(function(){
        if(isAuto){
            circles[active].className="circle";
            active++;
            if(active>2){
              active=0;
            }
        const current=circles[active];

        current.classList.add(current.getAttribute("color"));
        }


    },1000);
  }
  
 
}
manual.onclick = function(){
/*   clearInterval(); */
isAuto = false
  changeLight();
}

JS如何清除setInterval，不允许setInterval重复？

JS how to clear setInterval and not allow setInterval to repeat?

html

javascript

css

onclick

setinterval