Как правильно использовать setTimeOut?

Question

Я пытался правильно использовать setTimeOut, но не смог разобраться.

Expected Output:

, если вы нажмете любую кнопку, баннер будет скользитьпосле 8 секунд он исчезнет.

щелкните в любом месте на странице, и баннер исчезнет.

нажмите эту же кнопку, прежде чем истечет таймер 8 секунд, и должны начаться новые 8.

Actual output:

если вы нажмете любую кнопку, баннер будет отображаться, через 8 секунд он исчезнет.

щелкните в любом месте страницы, чтобы баннер исчез.

нажмите эту же кнопку до истечения таймера 8 секунд, вместо того, чтобы начинать новые 8 секунд, баннер завершит оставшиеся секунды первого щелчка, а затем исчезнет.

Вот что яПробовал также и коды и окна: [ссылка] 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);
}