【问题标题】:JavaScript - Listen for multiple events in a specified period of timeJavaScript - 在指定的时间段内监听多个事件
【发布时间】:2015-09-04 07:45:26
【问题描述】:

有没有办法使用 JavaScript 在某个时间段内监听一个 HTML 元素上的多个事件?

例如,我想看看用户是否在 2500 毫秒或类似的时间内点击了一个元素 5 次。

我目前无法详细说明。如果需要,我可以在有更多时间时提供更多详细信息。

我认为只是 HTML 元素上的点击事件,它更新每次点击的点击次数,然后如果在指定的时间段内未达到指定的点击次数,则重置计时器。我尝试了一些方法来实现这一点,但都失败了。

我希望它是纯 JavaScript,但我可以使用 jQuery 作为最后的手段。

如果这个问题有完全明显的答案,我提前道歉。

这与Click frequency calculation 不同,因为我不太关心频率。我关心用户在一段时间内点击了几次,然后才运行一些代码。我也不想使用 setInterval()。这两个问题肯定是相关的,但我不会说它们是重复的。

【问题讨论】:

标签: javascript html javascript-events


【解决方案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>

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2019-02-22
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多