时间戳

首页 > 解决方案 > 在用户交互上使用 setTimeout，但只执行一次

javascript - 在用户交互上使用 setTimeout，但只执行一次

问题描述

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

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

简化，代码如下，onButtonClick当用户按下按钮时调用were：

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

function foo() {
  // do something
}

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

我怎样才能实现这种行为？

标签： javascript

解决方案

用于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>

推荐阅读