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

Question

我有一个简单的代码，就像下面的代码片段一样，每当单击按钮并显示警报时都会发出警报，它运行正常但有一些缺点（知道这就是 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

也许是这样的：

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 3

听起来你想做一些叫做节流的事情。下面是一个如何实现它的例子：

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 函数允许您将普通函数转换为 throttled 函数，它只会在给定的 [=] 中第一次被调用时执行14=] 时间（以毫秒为单位指定以匹配 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 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>

编辑

"Nice solution, thanks for response(+1). But can the alert too be executed after 3s time"

当然...

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>

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

Is there a way for function to stop execution until the setTimeout() time is over

javascript

function

settimeout