Предотвратить модальное закрытие, если есть событие keydown, которое было вызвано

Question

Я показываю и скрываю некоторые модалы, изменяя их свойства CSS. Я хочу, чтобы они отображались до тех пор, пока в течение последних 3 секунд не будет ключевого события. Есть ли способ справиться с этим через JavaScript? VueJs решения были бы лучше.

Я сейчас скрываю модал через 3 секунды, вот так:

   

 function a(){
    document.querySelector("#playPause").style.display = "block";
                  setTimeout(() => {
                    document.querySelector("#playPause").style.display = "none";
                  }, 3000);
    }

#playPause{
     display:none;
      background-color:black;
    }

<button onclick="a()">Display</button>
<div id="playPause">EXAMPLE</div>

Answer 1

Сохраните тайм-аут как переменную и очистите его перед повторной установкой:

   

var timeout;
function a(){
    clearTimeout (timeout);
    document.querySelector("#playPause").style.display = "block";
    timeout = setTimeout(() => {
        document.querySelector("#playPause").style.display = "none";
    }, 3000);
}

#playPause{
     display:none;
      background-color:black;
    }

<button onclick="a()">Display</button>
<div id="playPause">EXAMPLE</div>