Question

我一直在尝试正确使用setTimeOut，但无法弄清楚。

Expected Output:

如果您单击任何按钮，横幅将滑入视图，8秒钟后它将消失。

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

在8秒计时器结束之前单击同一按钮，然后应重新开始8秒。

Actual output:

如果您单击任何按钮，横幅将滑入视图，8秒后它将消失。

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

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

这是我尝试过的内容，也是一个codeandbox： [链接] 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);
}

如何正确使用setTimeOut？

1 个答案: