javascript - 我怎样才能让文本在点击按钮后改变颜色，并在几秒钟没有点击后变回颜色？

Question

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

这是我尝试过的 JSFiddle:https://jsfiddle.net/9tdschym/1/

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

我不能使用 setTimeout，因为那时堆栈中会有很多 setTimeout 调用，从而弄乱了我想要实现的目标。

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

Answer 1

只是更改为切换并添加了更多时间。似乎现在可以工作了。

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

// Text will change for (n) milliseconds on click. 
// Further clicks will reset timeout 
let text = document.querySelector( '.text' )
let btn = document.querySelector( 'button' )
let timer = undefined;

btn.onclick = () => {   
   if(timer !== undefined) {
      clearTimeout(timer);   
   } else {
    text.classList.toggle( 'clicked' )
    }
  timer = setTimeout(() => {
    text.classList.toggle( 'clicked' );
    timer = undefined;
  }, 1500)
}

.clicked {
  color: red;
}

<p class="text">Text</p>
<button>Click</button>