title: How to properly use setTimeOut?
body: <p>I've been trying to properly use <code>setTimeOut</code> but haven't been able to figure it out.</p>
  
  <p><code>Expected Output:</code></p>
  
  <p>if you click any button, a banner will slide into view, after 8 seconds it will disappear.</p>
  
  <p>click anywhere else on the page and the banner disappear.</p>
  
  <p>click the same button before the 8 seconds timer ends and a new 8 should start.</p>
  
  <p><code>Actual output:</code> </p>
  
  <p>if you click any button a banner will slide into view, after 8 seconds it will disappear.</p>
  
  <p>click anywhere on the page so the banner disappear.</p>
  
  <p>click the same button before the 8 seconds timer ends, instead of starting a new 8-seconds the banner will finish off the remaining seconds of the first click then disappear.</p>
  
  <p>Here is what I've tried and also a codesandbox:
  [a link] <a href="https://codesandbox.io/s/n7zvwn11yj" rel="nofollow noreferrer">https://codesandbox.io/s/n7zvwn11yj</a></p>
  
  <pre><code>const getGreetingBanner =(e)=&gt;{
    let query = document.querySelector(e)
        query.style.right = '8px';
  
      let timer = setTimeout(() =&gt; {
          query.style.right = '-165px';
      }, 8000);
  
     clearTimeOut(timer)
  }
  
  document.addEventListener('click', (e) =&gt; { 
    let triggeredElement = e.target.className;
      if (triggeredElement === 'container') {
              document.querySelectorAll('.banishBanner').forEach(function(x) {
          x.style.right = '-180px';
        })
      }
  })
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>
  &lt;div class="container"&gt;
      &lt;button  onclick="getGreetingBanner('.thankyou')" type="button" class="accept"&gt;Accept&lt;/button&gt;
      &lt;button  onclick="getGreetingBanner('.comeBackSoon')" type="button" class="cancel"&gt;Cancel&lt;/button&gt;
      &lt;div class="banishBanner thankyou"&gt;Thank You!&lt;/div&gt;
     &lt;div class="banishBanner comeBackSoon"&gt;Come back soon.&lt;/div&gt;
  &lt;/div&gt;
  
  </code></pre>