Debounced Event Test

controllers.application.js

import Ember from 'ember';
import { debounce } from '@ember/runloop';

// This isnt totally necessary, but in the real world where an error.message might be really
// long it might be better to reduce the stored key to something more consistant
function hasher(str) {
  var hash = 0, i, chr;
  if (str.length === 0) return hash;
  for (i = 0; i < str.length; i++) {
    chr   = str.charCodeAt(i);
    hash  = ((hash << 5) - hash) + chr;
    hash |= 0;
  }
  return String(hash);
}

const dictionary = Object.create(null);
const DEBOUNCE_TIME = 100;

export default Ember.Controller.extend({
  events: [
    'shred it', 'shred it', 'shred it', 'twist it', 'shred it', 'shred it', 'pop it', 'shred it', 'shred it', 'twist it', 'shred it', 'shred it', 'twist it', 'shred it', 'shred it', 'pop it', 'shred it', 'shred it', 'twist it', 'shred it', 'shred it', 'pop it', 'shred it', 'shred it', 'twist it', 'shred it', 'shred it', 'twist it', 'shred it', 'shred it', 'pop it', 'shred it', 'shove it', 'surf it', 'shred it', 'shred it', 'shred it', 'twist it', 'shred it', 'shred it', 'pop it', 'shred it', 'shred it', 'twist it', 'shred it', 'shred it', 'twist it', 'shred it', 'shred it', 'pop it', 'shred it', 'shred it', 'twist it', 'shred it', 'shred it', 'pop it', 'shred it', 'shred it', 'twist it', 'shred it', 'shred it', 'twist it', 'shred it', 'shred it', 'pop it', 'shred it', 'shove it', 'surf it'
  ],
  
  emittedEvents: [],
  
  init() {
    // run through all events
    this.get('events').forEach(event => {
      // generate the events stored hash key
      const key = hasher(event);
      
      // If the event has not been seen before, store it in our dictionary
      if (!dictionary[key]) {
        dictionary[key] = () =>
        
          // when the events function is called, add the event to the 
          // 'emittedEvents' array
          this.emittedEvents.push(event);
      }
      
      // Grab the events function from the dictionary
      const fn = dictionary[key];
      
      // debounce the events function
      debounce(this, fn, DEBOUNCE_TIME, true);
    }); 
  }
});

templates.application.hbs

<h1>Debounced Event Test</h1>
<br>

<p>
  This demonstrates eagerly debouncing multiple unique and duplicate events. There is a large list of events that are iterated over and registered to fire an associated function to an event however if an event has already been fired it is debounced. This reduces the duplicated emitted events to just one per unique event, and eagerly fires the event when it is first encountered.
</p>

<p>
  In the real-world this is intended to demonstrate how a single error event emitted multiple times from a loop could be safely debounced.
</p>

<h4>Emitted Events</h4>
<ul>
{{#each emittedEvents as |event|}}
  <li>{{event}}</li>
{{/each}}
</ul>

<h4>All Events</h4>
<ul>
{{#each events as |event|}}
  <li>{{event}}</li>
{{/each}}
</ul>
<br>

twiddle.json

{
  "version": "0.15.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js",
    "ember": "3.4.3",
    "ember-template-compiler": "3.4.3",
    "ember-testing": "3.4.3"
  },
  "addons": {
    "ember-data": "3.4.2"
  }
}