Как ВРЕМЕННО отключить повторное нажатие кнопки

Question

Я сделал простой генератор подсказок для виртуальных игр Pictionary с друзьями. Пользователь нажимает кнопку и получает приглашение рисовать. Я хотел бы, чтобы кнопка была отключена на минуту или около того, чтобы пользователь не нажал кнопку еще раз, если ему не нравится их первое приглашение.

Я новичок в кодировании и убежище ' Мне очень повезло найти решение. Я знаю, что метод setTimout () запустит выражение через заданное время, но как мне сделать обратное и вместо этого предотвратить выполнение этого выражения в течение заданного времени? Приветствуются любые советы.

Единственная функция, которая у меня есть до сих пор, приведена ниже, она просто рандомизирует приглашение из массива. Кнопка выполняет функцию onClick в html, а затем возвращает результат в текстовом поле.

  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.net/keoxn51p/

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

Отключите кнопку, а затем запустите функцию для удаления этого состояния через 60 секунд.