Задержка (delay)

332

12 февраля 2018, 05:36

На экран выводится множество блоков, пользователь должен нажать на 5 блоков, после чего произойдет событие и эти 5 блоков исчезнут. На блоках висит onClick, событие - обычная функция. Внимание вопрос. Как сделать так, чтобы пользователь после нажатия на 5 блоков, пару секунд не мог нажимать на другие блоки?

Я пробывал делать что-то вроде этого, но дело в том что данная ниже функция, делает просто задержку, и если во время этой задержки пользователь нажимает на блоки, то onClick срабатывает и функции добавляются в stack и после этой задержки будут вызваны. Можно сказать мне нужно заблокировать добавление функций в stack, на время этой задержки

function wait(ms) {
  let start = Date.now();
  let now = start;
  while (now - start < ms) {
    now = Date.now();
  }

Есть вариант решения просто вешать прозрачный div на весь экран и потом его убирать, но как по мне такое себе решение. Буду использовать это в крайнем случае.

Answer 1

При нажатии на какой-либо блок ты можешь считать количество уже нажатых блоков, если оно равно 5, то снимать onClickсо всех блоков, а по прошествии n секунд возвращать:

let countOfClick = 0;
// Количество секунд
let n = 3;
const blockOnClick = (event) => {
    countOfClick++;
    if (countOfClick >= 5){
       countOfClick = 0;
       let blocksArray = document.getElementsByClassName('block');
       for(let block in blocksArray){
          block.onclick = false;
       }
       setTimeOut( ()=> {
          // Через N секунд возвращаем блокам обработчик клика
          for(let block in blocksArray){
             block.onclick = blockOnClick;
          }
       }, n*1000);
    }
}
// Ваш код с блоками ...