Форум

Sviside · #1 (**permalink**) 05.05.2020, 01:10

Добрый день,
Требуется: Отобразить модальное окно, если в течении 30 секунд не было клика по двум кнопкам с разными классами
Правильно понимаю, что нужно отменить стандартное всплытие на кнопках и поставить обработчик на сам body, а спустя заданный временной период отменить preventDefault?

Прошу совета у более компетентных коллег, как решить данную задачу наименее "колхозно"
Спасибо!

рони · #2 (**permalink**) 05.05.2020, 02:49

Sviside,

<!doctype html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Document</title>

  <script>
window.addEventListener('load', function() {
    const limit = 5000;
    let data = Array.from(document.querySelectorAll('button'), (button, i) =>
        (button.addEventListener('click', () => data[i] = performance.now()), performance.now())
    )
    const loop = now => {
      const delta = now - Math.min(...data);
      if(delta > limit) show(delta);
      else show(0);
      requestAnimationFrame(loop)
    };
    const show = num => out.innerHTML = num ? `Не было нажатий ${Math.trunc(num/1000)} сек.` : '';
    requestAnimationFrame(loop);
})
  </script>

</head>
<body>

<button type="button">click</button>
<button type="button">click</button>
<output id="out"></output>
</body>
</html>

Sviside · #3 (**permalink**) 05.05.2020, 20:35

Несколько иное имел ввиду, но суть да, понял)
Большое вам спасибо!

Sviside · #4 (**permalink**) 05.05.2020, 22:29

рони,

Несколько не то у меня получается. Скажите пожалуйста, я могу же повесить addEventListener на элемент, и загнать все в setTimeout ?

рони · #5 (**permalink**) 05.05.2020, 22:44

Sviside,
не понимаю, не знаю что вы хотите сделать.

Sviside · #6 (**permalink**) 06.05.2020, 02:12

рони,
Если интересно, но решил задачу просто и костыльно - даю setTimeout, а по клику clearTimeout
Но мне понравилась ваша реализация, попробую переписать под себя
Еще раз большое спасибо!

Форум

Справочник

Discord чат

Курсы javascript