如何暂时禁止按钮再次被按下？

Question

我做了一个简单的提示生成器，用于和朋友进行虚拟的Pictionary游戏。用户点击一个按钮，就会得到一个画画的提示。我想让按钮被禁用一分钟左右，以防止用户再次点击按钮，如果他们不喜欢他们的第一次提示。

我对编码很陌生，也没有找到什么解决办法。我知道setTimout()方法会在给定的时间后运行一个表达式，但是我怎么做才能反过来防止该表达式在给定的时间内发生呢？感谢任何建议。

到目前为止，我只有下面这个函数，它只是从一个数组中随机抽取一个提示。按钮在html中执行函数onClick，然后在文本框中返回结果。

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

Answer 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>

Answer 2

https:/jsfiddle.netkeoxn51p。

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

将你的按钮设置为禁用，然后在60s内运行一个函数来删除该状态。