javascript - 在 setTimeout 间隔期间单击另一个按钮时出现错误

Question

目前正在学习 javascript，我正在尝试使用按钮制作一个可过滤的画廊。我设法对此进行了编码，但存在一个错误，无法弄清楚如何修复它。当我单击任何按钮然后在 setTimeout 期间单击另一个按钮时，它会显示每个按钮的两个元素。 (例如，单击“第一”然后突然单击“第二”，同时显示“第一”和“第二”过滤元素。)

我已经尝试将 setTimeout 设置为“0”并且它有效。但是动画有点乱。

非常感谢任何建议和帮助。谢谢!

var btn = document.getElementsByClassName("btn");
var nodeList = document.querySelectorAll(".port-list");


for(var i = 0; i < btn.length; i++) {
    btn[i].addEventListener("click", function() {
        let category = this.getAttribute("id");
        
        if(category == "all"){
            for(let j = 0; j < nodeList.length; j++) {
                nodeList[j].classList.add("hide");
                addHide(j);
            }
            
        } else {
            for(let k = 0; k < nodeList.length; k++) {
                
                nodeList[k].classList.add("hide");
                if(nodeList[k].className == "port-list " + category + " hide"){
                   addHide(k);
                 }
            }
        }
    });
}

function addHide(i){
    setTimeout(function() {
    
        nodeList[i].classList.remove("hide");
    
    }, 400);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.wrapper {
    width: 80%;
    height: 100%;
    margin: 20px auto 0 auto;
    text-align: center;
}
.btn {
    background: transparent;
    border: 1px solid black;
    padding: 8px 12px;
    margin: 10px 5px;
    cursor: pointer;
    transition: .5s all ease-out;
}
.btn:hover {
    background: black;
    color: white;
}
.active {
    background: black;
    color: white;
}
.portfolio-container {
    width: 100%;
    height: auto;
    padding: 0;
    margin: 0;
    
}
.port-list {
    float: left;
    list-style-type: none;
    width: 31.33%;
    transition: .4s all ease;
    height: 10%;
    border: 1px solid black;
    line-height: 100px;
    margin: .5%;

}
.hide {
    transform: scale(0);
    width: 0;
    height: 0;
    margin: 0;
}

<div class="wrapper">
            <button class="btn active" id="all">All</button>
            <button class="btn" id="first">First</button>
            <button class="btn" id="second">Second</button>
            <button class="btn" id="third">Third</button>
            <ul class="portfolio-container">
                <li class="port-list first">1st</li>
                <li class="port-list third">3rd</li>
                <li class="port-list second">2nd</li>
                <li class="port-list first">1st</li>
                <li class="port-list third">3rd</li>
                <li class="port-list second">2nd</li>
                <li class="port-list third">3rd</li>
                <li class="port-list second">2nd</li>
                <li class="port-list first">1st</li>
            </ul>
        </div>

Answer 1

也许最简单的解决方案是设置一个标志 var animating = false;。

单击按钮时将其设置为 true。动画完成后将其设置为 false。

如果标志为真，则忽略按钮点击。

var btn = document.getElementsByClassName("btn");
var nodeList = document.querySelectorAll(".port-list");
var animating = false;

for (var i = 0; i < btn.length; i++) {
  btn[i].addEventListener("click", function() {
  
    if (!animating) {
      animating = true;
      
      let category = this.getAttribute("id");

      if (category == "all") {
        for (let j = 0; j < nodeList.length; j++) {
          nodeList[j].classList.add("hide");
          addHide(j);
        }

      } else {
        for (let k = 0; k < nodeList.length; k++) {

          nodeList[k].classList.add("hide");
          if (nodeList[k].className == "port-list " + category + " hide") {
            addHide(k);
          }
        }
      }
    }
  });
}

function addHide(i) {
  setTimeout(function() {

    nodeList[i].classList.remove("hide");
    animating = false;
    
  }, 400);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.wrapper {
  width: 80%;
  height: 100%;
  margin: 20px auto 0 auto;
  text-align: center;
}

.btn {
  background: transparent;
  border: 1px solid black;
  padding: 8px 12px;
  margin: 10px 5px;
  cursor: pointer;
  transition: .5s all ease-out;
}

.btn:hover {
  background: black;
  color: white;
}

.active {
  background: black;
  color: white;
}

.portfolio-container {
  width: 100%;
  height: auto;
  padding: 0;
  margin: 0;
}

.port-list {
  float: left;
  list-style-type: none;
  width: 31.33%;
  transition: .4s all ease;
  height: 10%;
  border: 1px solid black;
  line-height: 100px;
  margin: .5%;
}

.hide {
  transform: scale(0);
  width: 0;
  height: 0;
  margin: 0;
}

<div class="wrapper">
  <button class="btn active" id="all">All</button>
  <button class="btn" id="first">First</button>
  <button class="btn" id="second">Second</button>
  <button class="btn" id="third">Third</button>
  <ul class="portfolio-container">
    <li class="port-list first">1st</li>
    <li class="port-list third">3rd</li>
    <li class="port-list second">2nd</li>
    <li class="port-list first">1st</li>
    <li class="port-list third">3rd</li>
    <li class="port-list second">2nd</li>
    <li class="port-list third">3rd</li>
    <li class="port-list second">2nd</li>
    <li class="port-list first">1st</li>
  </ul>
</div>