Solve layout thrashing by debouncing the measuring function

<html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.min.js"></script>
    <style>
      #wrapper div {
        background: blue;
        height: 50px;
        width: 50px;
        margin: 2px;
      }

      #message {
        display: none;
        position: fixed;
        margin: 25%;
        background: gray;
        height: 3em;
        padding-top: 2em;
        width: 50%;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <div id="heightInfo">Number of elements: 0.</div>
    <div id="message">Items added!</div>
    <div id="wrapper"></div>
    
    
  <script>
    function addItem() {
      const newElement = document.createElement("div");
      wrapper.appendChild(newElement); 
      debouncedSubmitNewHeightEvent();
      n += 1;
    }

    function addManyItems() {
      for (let i = 0; i < 1000; i++) {
        addItem();
      }
      trackElements();
    }

    function submitEvent(eventName, eventData) {
      const event = new CustomEvent(eventName, {
        bubbles: false,
        cancelable: false,
        detail: eventData
      });
      wrapper.dispatchEvent(event);
    }

    function submitNewHeightEvent() {
      submitEvent("new-wrapper-height", wrapper.getBoundingClientRect().height);
    }

    function trackElements() {
      infoBox.innerText = `Number of elements: ${n}.`;
    }

    function addNewItem() {
      addItem();
      trackElements();
    }

    function compareWidths() {
      const wrapperWidth = wrapper.offsetWidth;
      for (let i = 0; i < wrapper.childElementCount; i++) {
        wrapper.children[i].style.width = wrapperWidth;
      }
    }

    const wrapper = document.getElementById("wrapper");
    const infoBox = document.getElementById("heightInfo");
    const message = document.getElementById("message");
    const debouncedSubmitNewHeightEvent = _.debounce(submitNewHeightEvent, 50);

    wrapper.addEventListener("new-wrapper-height", (event) => console.log(event.detail));
    let n = 0;
    let height;

    document.addEventListener("keyup", e => {
      switch (event.key) {
        case "s":
          addNewItem();
          break;
        case "m":
          addManyItems();
          break;
        case "c":
          compareWidths();
          break;
      }
      console.log("Finished");
    });
  </script>
  </body>
</html>