Javascript 如何使文本在单击按钮后更改颜色，并在不单击几秒钟后重新更改颜色？

我想要一些文本在点击按钮时变为红色。 可以多次单击该按钮，并使文本保持红色。 稍微不点击按钮后，文本应返回黑色

以下是我尝试过的一部分：

文本

点击 .点击{ 颜色：红色； } 让text=document.querySelector（“.text”） 设btn=document.querySelector（'按钮'） btn.onclick=（）=>{ text.classList.add（'clicked'） 设置超时（（）=>{ text.classList.remove（'clicked'） }, 500) } 我不能使用setTimeout，因为这样堆栈中会有许多setTimeout调用，从而破坏了我试图实现的目标

---

我知道我可能可以通过使用一个变量来硬编码一个解决方案，检查它是否被单击，以及上次单击时检查它的其他检查，但我认为有一个更好的解决方案。

它实际上可以工作，但您需要输入5000，因为它在毫秒内工作。

刚刚更改为切换并添加了更多时间现在好像有用了

添加了一个标志以防止多次单击

//文本将在单击时更改（n）毫秒。
//进一步单击将重置超时
让text=document.querySelector（“.text”）
设btn=document.querySelector（'按钮'）
设定时器=未定义；
btn.onclick=（）=>{
如果（计时器！==未定义）{
清除超时（计时器）；
}否则{
text.classList.toggle（'clicked'）
}
计时器=设置超时（（）=>{
text.classList.toggle（'clicked'）；
定时器=未定义；
}, 1500)
}

。单击{
颜色：红色；
}

文本

---

单击，这可能会帮到您。通过检查其是否处于活动状态进行简单调整

let text=document.querySelector（“.text”）
设btn=document.querySelector（'按钮'）
设活动=假
btn.onclick=（）=>{
如果（！活动）{
text.classList.add（'clicked'）
主动=真；
设置超时（（）=>{
text.classList.remove（'clicked'）
主动=假；
}, 1500)
}
}

。单击{
颜色：红色；
}

文本

---

单击我不这么认为，因为如果您多次单击按钮，5秒后会连续触发一系列设置超时。此外，我还特意将其设置为500毫秒后再更改。我不想要5sNo，我想要当按钮被点击时它保持红色。在500毫秒的按钮没有被点击后，它会回到黑色。我不希望红色在红色和黑色之间来回闪烁，这就是你的代码所做的。添加了

点击
bool来处理愤怒点击。将
1500
增加到您需要的时间。好的，给我一点时间。所以每次点击都会重置？嗯。。。这是一个更好的解决方案。。在您的解决方案中，调用堆栈中仍会触发一系列设置超时，因此并非所有单击都等于500毫秒的红色。如果单击按钮，然后等待499ms，然后再次单击，文本将返回黑色，因为setTimeout将触发。
<p class="text">Text</p>
<button>Click</button>

.clicked {
  color: red;
}

let text = document.querySelector( '.text' )
let btn = document.querySelector( 'button' )

btn.onclick = () => {
    text.classList.add( 'clicked' )
  setTimeout(() => {
    text.classList.remove( 'clicked' )
  }, 500)
}