有没有办法让函数停止执行，直到 setTimeout() 时间结束

Question

我有一个简单的代码，如下面的 sn-p，每当单击按钮并显示警报时都会发出警报，运行正常但有某些缺点（知道这就是 setTimeout 的工作原理）。
在这里，当您单击按钮 2、3、4 次时，只会显示多次警报。但我只希望从第一次点击开始发出 1 次警报，并忽略进一步的点击，直到第一次点击完成 3 秒。

function alertBtn() {
  setTimeout(alertFunc, 3000);
}

function alertFunc() {
  alert("Alert is clicked so remain alerted");
}

<button onclick="alertBtn()">Alert me</button>

是否可以使用纯 JavaScript 方式？这可能类似于 SO 使用的方法，例如我们无法在 5 秒（或其他时间）内再次发表评论，该按钮在该时间间隔内有点禁用。 5秒的障碍

Answer 1

您可以使用clearTimeout() 来取消先前通过调用setTimeout() 建立的超时

let time;
let clicked = false;
function alertBtn() {
  if (!clicked){
    clicked = true;
    clearTimeout(time);
    time = setTimeout(alertFunc, 3000);
  }
} 

function alertFunc() {
  alert("Alert is clicked so remain alerted");
  clicked = false;
}

<button onclick="alertBtn()">Alert me</button>

clearTimeout - https://developer.mozilla.org/en-US/docs/Web/API/clearTimeout

Debouncing and throttling in JavaScript

Answer 2

听起来您正在寻找一种叫做节流的东西。这是一个如何实现它的示例：

const throttle = function (fn, delay) {
    let timeout;
    return function (...args) {
        if (!timeout) {
            const returnVal = fn.apply(this, args);

            timeout = setTimeout(() => {
                timeout = undefined;
            }, delay);
            
            return returnVal;
        }
    };
};

throttle 函数允许您将普通函数转换为 节流 函数，该函数只会在给定的 delay 时间（以毫秒为单位指定为匹配setTimeout的行为）。

它通过创建一个新函数来工作，该函数在第一次调用时设置超时，并调用初始函数。然后，如果在超时结束之前再次调用了受限制的函数，它将不会再次调用初始函数。

如果您想将函数限制 3 秒，那么您应该将值 3000 作为 delay 参数传递，以便创建的超时持续 3 秒。您可以通过将匿名函数传递给 throttle 来仅创建节流函数，如下所示：

const throttle = function (fn, delay) {
    let timeout;
    return function (...args) {
        if (!timeout) {
            const returnVal = fn.apply(this, args);

            timeout = setTimeout(() => {
                timeout = undefined;
            }, delay);
            
            return returnVal;
        }
    };
};

const alertBtn = throttle(function () {
  alert("Alert is clicked so remain alerted");
}, 3000);

<button onclick="alertBtn()">Alert me</button>

Answer 3

可能是这样的：

let clickedOnce = false;

function alertBtn() {
  if (!clickedOnce) {
    clickedOnce = true;
    setTimeout(alertFunc, 3000);
  }
}

function alertFunc() {
  alert("Alert is clicked so remain alerted");
  clickedOnce = false;
}

<button onclick="alertBtn()">Alert me</button>

Answer 4

最简单的方法是通过setTimeout 简单地控制按钮disabled 的状态。处理程序确实负责执行alertFunc 并在单击时禁用按钮并启动后者的时移活动状态...

function alertFunc() {
  alert("Alert is clicked so remain alerted");
}

function controlButtonAbility(btn) {
  btn.disabled = true;
  setTimeout(() => btn.disabled = false, 5000);
}

function handleButtonClick(evt) {
  const btn = evt.currentTarget;

  controlButtonAbility(btn);

  alertFunc();
}
document
  .querySelector('button')
  .addEventListener('click', handleButtonClick);

<button>Alert me</button>

编辑

“很好的解决方案，感谢响应（+1）。但是警报也可以在 3 秒后执行”

当然……

function alertFunc() {
  alert("Alert is clicked so remain alerted");
}

function controlButtonAbility(btn) {
  btn.disabled = true;
  setTimeout(() => btn.disabled = false, 5000);
}

function handleButtonClick(evt) {
  const btn = evt.currentTarget;

  controlButtonAbility(btn);

  // alertFunc();
  setTimeout(alertFunc, 2000);
}
document
  .querySelector('button')
  .addEventListener('click', handleButtonClick);

<button>Alert me</button>