如何正确使用的setTimeout？

Question

我一直在试图正确地使用setTimeOut，但一直没能弄明白。

Expected Output:

如果你点击任何按钮，横幅滑入视图，在8秒之后它会消失。

点击其他地方的页面和横幅消失。

这8秒计时器结束和一个新的8应该开始前点击相同的按钮。

Actual output:

如果你点击任何按钮旗帜将滑入视图，在8秒之后它会消失。

点击页面上的任何地方，所以旗帜消失。

点击8秒计时器结束之前相同的按钮，而不是开始一个新的8秒的旗帜将玩完第一次点击的剩余秒钟，然后消失。

以下是我已经尝试，也是一个codesandbox：[链接] https://codesandbox.io/s/n7zvwn11yj

const getGreetingBanner =(e)=>{
  let query = document.querySelector(e)
      query.style.right = '8px';

    let timer = setTimeout(() => {
        query.style.right = '-165px';
    }, 8000);

   clearTimeOut(timer)
}

document.addEventListener('click', (e) => { 
  let triggeredElement = e.target.className;
    if (triggeredElement === 'container') {
            document.querySelectorAll('.banishBanner').forEach(function(x) {
        x.style.right = '-180px';
      })
    }
})

HTML：

<div class="container">
    <button  onclick="getGreetingBanner('.thankyou')" type="button" class="accept">Accept</button>
    <button  onclick="getGreetingBanner('.comeBackSoon')" type="button" class="cancel">Cancel</button>
    <div class="banishBanner thankyou">Thank You!</div>
   <div class="banishBanner comeBackSoon">Come back soon.</div>
</div>

Answer 1

当你在同一个按钮再次单击您必须清除超时。

var timeout;
const getGreetingBanner =(e)=>{
  let query = document.querySelector(e)
      query.style.right = '8px';
    //clearing timeout
    clearTimeout( timeout );

    timeout = setTimeout(() => {
        query.style.right = '-165px';
    }, 8000);
}