JavaScript - Прослушивание нескольких событий за указанный период времени

Question

Есть ли способ прослушать несколько событий в HTML-элементе за определенный период времени с помощью JavaScript?

Например, я хочу узнать, нажимает ли пользователь элемент 5 раз за 2500 миллисекунд или что-то в этом роде.

В настоящее время я не могу вдаваться в подробности. Если нужно, я могу добавить больше деталей, как только у меня будет больше времени.

Я думаю, что просто событие click на элементе HTML, которое обновляет количество кликов на каждом клике, а затем сбрасывает таймер, если указанное количество кликов не было достигнуто за указанный период времени. Я пробовал некоторые способы достижения этого, и все они потерпели неудачу.

Я бы предпочел, чтобы это был чистый JavaScript, однако я мог бы использовать jQuery в качестве крайней меры.

Если есть совершенно очевидный ответ на этот вопрос, я извиняюсь раньше времени.

Это отличное от Click frequency calculation, потому что меня не слишком беспокоит частота. Меня волнует, что пользователь нажал несколько раз за определенный период и только затем запустил некоторый код. Я также предпочел бы не использовать setInterval(). Эти два вопроса, безусловно, связаны, но я бы не сказал, что они дубликаты.

Answer 1

Этот метод не требует какого-либо JQuery или использовать любые таймеры, которые в качестве дополнительного бонуса делают его более точным.

var clicks = 0, 
 
    firstClickTime = 0, 
 
    clicksNeeded = 3, 
 
    timeSpan = 1000; //time in milliseconds 
 

 
var myEvent = function(){ 
 
    document.getElementById("myLabel").innerHTML="TRIGGERED!"; 
 
} 
 

 
document.getElementById("myButton").onclick = function(){ 
 
    var dt = Date.now()-firstClickTime; 
 
    if (dt > timeSpan){ 
 
    firstClickTime=Date.now(); 
 
    clicks = 0; 
 
    } 
 
    if (++clicks >= clicksNeeded){ 
 
    firstClickTime=0; 
 
    clicks=0; 
 
    myEvent(); 
 
    } 
 
};

<button id="myButton">Test</button> 
 
<button id="reset" onclick="document.getElementById('myLabel').innerHTML='Not Triggered';clicks=0;firstClickTime=0;">Reset</button> 
 
<h1 id="myLabel">Not Triggered</h1>