javascript - 如何阻止快速点击破坏我的代码？

Question

我有一个 CSS 网格。当你点击一个 div 时，它会切换一个类使其展开，然后在 3000 毫秒后，该类再次切换，div 恢复到原始大小。用户应该能够克服这个延迟，这样如果他们想在 3 秒 setTimeout 过去之前折叠 div，他们就可以做到。

我的问题是，发生这种情况时，它不会取消设置的超时功能，然后用户输入和旧的“滞后”代码开始重叠，这造成了困惑并打破了我的逻辑。

代码如下:

var open = false;

function dissolveExpand(parent, sibling, tte){
    if(open==false){
        open=true;
        toggle(parent, sibling, tte);
    } else{
        open=false;
        toggle(parent, sibling, tte);
    };
};

function closer(parent, sibling, tte){
    if(open==true){
        toggle(parent, sibling, tte);
    };
    console.log(open);
};

function toggle(parent, sibling, tte){
    parent.classList.toggle("expanded-div");
    sibling.classList.toggle("hidden-div");
    tte.classList.toggle("expanded-tap");
};

tte_parent1.onclick = function(){
    dissolveExpand(tte_parent1, sibling1, tte1);
    setTimeout(function(){closer(tte_parent1, sibling1, tte1); }, 3000);

};`

如果我坐在这里垃圾邮件点击 tte_parent 元素，代码就会停止工作适本地。

很抱歉缺乏细节，但我被困住了

Answer 1

clearTimeout() 方法清除使用 setTimeout() 设置的计时器。而不是将 true 或 false 应用于 open 变量，我会使用 isOpen = false ，然后 isOpen = !isOpen 每次点击

let isOpen = false;
let timeOut;

toggleClassList(){ 
  if(isOpen) {
     isOpen = !isOpen 
     //Remove expand class list logics 
     clearTimeOut(timeOut)
     return;
  } 
  isOpen = !isOpen 
  //Add expand class list logics go here
  timeOut = setTimeout(() => {
       isOpen = !isOpen
       //Remove class list after 3s
  }, 3000)
}