Javascript 对用户交互使用setTimeout，但只执行一次

我有一个按钮，应该以以下方式工作：

当用户按下此按钮时，会调用setTimeout等待几秒钟，然后执行一个函数

简化后，代码如下所示，当用户按下按钮时调用单击：

function onButtonClick() {
  // executes some trivial things
  setTimeout(foo, 3000);
} 

function foo() {
  // do something
} 

但是，这是可行的，用户被允许甚至应该多次单击按钮。毫无疑问，在等待3秒钟后，foo将被执行多次。相反，我只希望在最后一次按钮点击后3秒执行foo

如何实现此行为？

使用clearTimeout取消setTimeout

这样，每当用户再次单击按钮时，上一次超时将被取消，新的超时将开始

让超时； 功能按钮点击{ //执行一些琐碎的事情 clearTimeouttimeout； 超时=setTimeoutfoo，3000； } 函数foo{ console.log'foo'； } 单击我使用clearTimeout取消设置超时

这样，每当用户再次单击按钮时，上一次超时将被取消，新的超时将开始

让超时； 功能按钮点击{ //执行一些琐碎的事情 clearTimeouttimeout； 超时=setTimeoutfoo，3000； } 函数foo{ console.log'foo'； }

---

单击上下文中的meDepending，您可能还希望将超时嵌入onButtonClick函数对象中。i、 e.ClearTimeOutOnButton单击.timeout；onButtonClick.timeout=setTimeOutoo，3000；正是我需要的。来自W3K：clearTimeout方法清除使用setTimeout方法设置的计时器。setTimeout返回的ID值用作clearTimeout方法的参数。根据上下文，您可能还希望将timeout嵌入onButtonClick函数对象中。i、 e.ClearTimeOutOnButton单击.timeout；onButtonClick.timeout=setTimeOutoo，3000；正是我需要的。来自W3K：clearTimeout方法清除使用setTimeout方法设置的计时器。setTimeout返回的ID值用作clearTimeout方法的参数。