如何暂时禁止再次按下按钮答案

【问题标题】：How to TEMORARILY disable a button from being pushed again如何暂时禁止再次按下按钮
【发布时间】：2020-05-06 19:07:31
【问题描述】：

我制作了一个简单的提示生成器，用于与朋友一起进行虚拟字典游戏。用户单击一个按钮并获得绘制的提示。我想让按钮被禁用一分钟左右，以防止用户在不喜欢他们的第一个提示时再次单击该按钮。

我对编码非常陌生，并且没有太多运气找到解决方案。我知道 setTimout() 方法将在给定时间后运行一个表达式，但我该如何做相反的事情并防止该表达式在给定时间内发生呢？任何建议表示赞赏。

到目前为止，我唯一的功能如下，它只是随机化数组中的提示。按钮执行html中的onClick函数，然后在文本框中返回结果。

  document.getElementById("textbox").value = prompts[Math.floor(Math.random() * prompts.length)];
}```

【问题讨论】：

所以，禁用按钮 x 时间...
这能回答你的问题吗？ Javascript Disable button and reenable it after 5 seconds

标签： javascript button timer settimeout

【解决方案1】：

您可以使用我们所说的“标志”。在这种情况下，标志将是您设置为 true 或 false 的变量，以指示用户是否可以点击（以下示例中的 canClick 变量）。每当用户单击时，在执行您的功能之前检查标志。并在延迟后使用setTimeout 重置标志：

var prompts = ["Cow", "Dog", "Cat", "Rat", "Owl"],
    canClick = true,
    clickDelay = 2 * 1000, // 2 seconds for the demo
    generateBtn = document.getElementById('generate-btn'),
    textbox = document.getElementById("textbox");

generateBtn.addEventListener('click', onBtnClick);

function onBtnClick() {
  if (canClick) {
    canClick = false;
    generateBtn.disabled = true;
    displayRandomPrompt();
    // After a delay
    setTimeout(function() {
      canClick = true;
      generateBtn.disabled = false;
    }, clickDelay);
  }
}

function displayRandomPrompt() {
  textbox.value = prompts[Math.floor(Math.random() * prompts.length)];
}

<input id="textbox" />
<button id="generate-btn">New suggestion</button>

【讨论】：

【解决方案2】：

https://jsfiddle.net/keoxn51p/

  button.disabled = true
  setTimeout(() => {
    button.disabled = false
  }, 60000)

将您的按钮设置为禁用，然后运行一个函数以在 60 秒后移除该状态。

【讨论】：