如何在javascript中计算y时间内的x事件数？答案

【问题标题】：How to calculate x number of events over y amount of time in javascript?如何在javascript中计算y时间内的x事件数？
【发布时间】：2020-08-18 21:15:55
【问题描述】：

我有一个接收事件的类，我们称之为“EVENT_X”。

它可以在任何时间段内多次接收此事件，但我需要知道它是否超过阈值，比如 5 分钟内发生 10 个“EVENT_X”事件，以便我可以采取相应的措施。

我无法为此找出合适的算法，也无法找到一种有效的算法，我只是尝试等待前 10 个事件发生并检查时间是否小于 5，当然这并不能解决目的.

非常感谢任何帮助，谢谢！

【问题讨论】：

创建一个时间队列，然后在加入新元素时，将所有超过 5 分钟的元素出列。如果队列长于 10 人，请随心所欲。

标签： javascript algorithm data-structures

【解决方案1】：

所以添加一个对象并在事件发生时记录。添加事件时，过滤掉任何超过 5 分钟的事件。检查长度。如果达到最大值，则启动您接下来要执行的任何操作。

const evtTypes = {};

function logEvent (event) {

  const { type } = event; 
  evtTypes[type] = evtTypes[type] || [];
  evtTypes[type].push({ ts: new Date().getTime(), data: event });
  evtTypes[type] = evtTypes[type].filter(({ ts }) => new Date().getTime() - ts < 300000);
  
  if (evtTypes[type].length >= 10) {
    console.log(`"${event.type}" triggered 10 times in 5 minutes.`);
  }
}


logEvent({ type: 'test', foo: 'bar01' });
logEvent({ type: 'test', foo: 'bar02' });
logEvent({ type: 'test', foo: 'bar03' });
logEvent({ type: 'test', foo: 'bar04' });
logEvent({ type: 'test', foo: 'bar05' });
logEvent({ type: 'test', foo: 'bar06' });
logEvent({ type: 'test', foo: 'bar07' });
logEvent({ type: 'test', foo: 'bar08' });
logEvent({ type: 'test', foo: 'bar09' });
logEvent({ type: 'test', foo: 'bar10' });

【讨论】：

嘿@epascarello，这是一个很好的解决方案，我很高兴你能帮上忙。我正在设置计时器，什么不是。谢谢（：

【解决方案2】：

最后一次单击按钮时，使用全局数组作为日期对象的堆栈。每次单击它时，都会附加另一个。如果在最后 5 次中至少有 5 次，则在毫秒内查找从现在到第一次点击的差异。如果它小于 5000，则执行您想要的操作，例如通过添加类或向控制台输出来更改按钮的颜色。

注意：如果您要慢一些（超过 5 秒），则必须点击快一些，直到最后 5 次点击及时。为了演示，我只需要 5 次点击和 5 秒，但您可以轻松地将其更改为您的愿望。

var counter = [];
document.getElementById('btn').addEventListener('click' , function() {
    let now = new Date();
    counter.push(now);
    if (counter.length >=5) {
        counter = counter.slice(-5);
        let diff = now - counter[0];
        if (diff <= 5000) {
            document.getElementById('btn').classList.add('x5');
            console.log('Clicked 5x in the time.');
        }
    }
});

.x5 { background: yellow; }

&lt;button id='btn'&gt;Click it 5x&lt;/button&gt;

【讨论】：