Javascript 如何正确使用setTimeOut？

我一直在尝试正确地使用

setTimeOut

，但一直没有弄明白

预期输出：

若你们点击任何一个按钮，一个横幅将滑入视图，8秒后它将消失

单击页面上的任何其他位置，横幅将消失

在8秒计时器结束之前，单击相同的按钮，新的8秒计时器将启动

实际输出：

若你们点击任何一个按钮，横幅就会滑入视图，8秒后它就会消失

单击页面上的任意位置，使横幅消失

在8秒计时器结束前单击相同的按钮，横幅将结束第一次单击的剩余秒数，然后消失，而不是开始新的8秒

这是我尝试过的，也是一个代码沙盒： [链接]

HTML:

接受
取消
非常感谢。
快回来。

再次单击同一按钮时，必须清除超时

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

---

timeout变量是否需要是全局变量？@Vash最好在全局范围内分配它，以便您可以在页面中的任何位置访问它。

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

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