JavaScript - 监听指定时间段内的多个事件
JavaScript - Listen for multiple events in a specified period of time
有没有办法使用JavaScript在某个时间段内监听HTML元素上的多个事件?
例如,我想看看用户是否在 2500 毫秒内点击了某个元素 5 次之类的。
我目前无法详细介绍很多细节。如果需要,我可以在有更多时间时提供更多细节。
我想只是一个 HTML 元素上的点击事件,它更新每次点击的点击次数,然后如果在指定时间段内未达到指定的点击次数则重置计时器。我已经尝试了一些方法来实现这一点,但都失败了。
我希望它是纯粹的 JavaScript,但我可以使用 jQuery 作为最后的手段。
如果这个问题有一个完全明显的答案,我提前道歉。
这点和Click frequency calculation不一样,因为我不太在意频率。我关心的是用户在某个时期点击了几次,然后才 运行 一些代码。我也宁愿不使用 setInterval()。这两个问题当然是相关的,但我不会说它们是重复的。
此方法不需要任何 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>
有没有办法使用JavaScript在某个时间段内监听HTML元素上的多个事件?
例如,我想看看用户是否在 2500 毫秒内点击了某个元素 5 次之类的。
我目前无法详细介绍很多细节。如果需要,我可以在有更多时间时提供更多细节。
我想只是一个 HTML 元素上的点击事件,它更新每次点击的点击次数,然后如果在指定时间段内未达到指定的点击次数则重置计时器。我已经尝试了一些方法来实现这一点,但都失败了。
我希望它是纯粹的 JavaScript,但我可以使用 jQuery 作为最后的手段。
如果这个问题有一个完全明显的答案,我提前道歉。
这点和Click frequency calculation不一样,因为我不太在意频率。我关心的是用户在某个时期点击了几次,然后才 运行 一些代码。我也宁愿不使用 setInterval()。这两个问题当然是相关的,但我不会说它们是重复的。
此方法不需要任何 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>