在用户交互中使用setTimeout，但只执行一次

Question

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

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

简化后，代码如下，如果用户按下按钮时调用onButtonClick：

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

然而，这是可行的，用户可以(甚至应该(多次单击按钮。在等待3秒钟后，foo会被意外地执行多次。相反，我只希望foo在最后一次单击按钮后3秒执行。

我该如何实现这种行为？

Answer 1

使用clearTimeout取消setTimeout。

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

let timeout;
function onButtonClick() {
// executes some trivial things
clearTimeout(timeout);
timeout = setTimeout(foo, 3000);
}
function foo() {
console.log('foo');
}

<button onclick="onButtonClick()">click me</button>