时间戳

首页 > 解决方案 > JS如何清除setInterval，不允许setInterval重复？

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

问题描述

我正在制作一个简单的 HTML/CSS/JS 程序，其中出现交通信号灯。有两个按钮 - “自动”和“手动”。如果您单击“自动”，您应该会看到交通信号灯自行闪烁颜色。我通过 setInterval 实现了这一点。如果单击“手动”，则意味着能够将控制切换为手动，并且只能手动更改颜色。我对 Javascript 很陌生，我目前遇到的问题是，当我从 Auto 转到 Manual 时，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 的第一天。

标签： javascripthtmlcssonclicksetinterval

解决方案

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

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();
}

推荐阅读