5.js

class Batching {
  /** 
   * We declare and initialize a variable to keep track of whether 
   * or not an update has already been requested 
   */
  updateRequested = false;

  scheduleUpdate() {

    /** 
     * In here, we need a check to see if an update is already previously requested.
     * If an update already is requested, we don't want to do any unnecessary work!
     */
    if(!this.updateRequested) {
      
      /* If no update has yet been requested, we set the `updateRequested` flag to `true` */
      this.updateRequested = true;
      
      /** 
       * Since we now know that microtasks run after JavaScript has finished
       * executing, we can use this knowledge to our advantage, and only set 
       * the `updateRequested` flag back to `false` again once all the tasks 
       * have run, essentially delaying, or _batching_ the update!
       */
      Promise.resolve().then(() => {
        this.updateRequested = false;
        this.update();
      });
    }
  }

  /* This is our `update` method that we only want to be called once */
  update() {
    console.log('updating!');
  }
}

const batching = new Batching();

/* We call scheduleUpdate in quick succession */
batching.scheduleUpdate();
batching.scheduleUpdate();
batching.scheduleUpdate();

/* 🎉 The result: */

// "updating!" 

/* `update` only ran once! */