Invoke function after div resize is complete?

I have a resizeable div like this:

div{
  resize:both;
  overflow:hidden;
  height:10rem;
  width:10rem;
  border:solid 0.5rem black;
}

<div id="item" ></div>

How do I invoke a function after it has completed resizing?

i.e. I don’t want the function to continuously invoke while it’s being resized,
rather I need it to invoke after the mouse has been lifted from the bottom right resizing icon

Answer

You could just check the mouseup event, and track the old v new size.

The only gotcha here is if there are other ways to resize the div other than using the mouse.

const item = document.querySelector('#item');

function getSize() {
  return {
    w: item.offsetWidth,
    h: item.offsetHeight
  }
}

let old = getSize();

item.addEventListener('mouseup', () => {
  let n = getSize();
  if (old.w !== n.w && old.h !== n.h) {
    console.log('resized: ' + JSON.stringify(n));
    old = n;
  }
});

#item {
  resize:both;
  overflow:hidden;
  height:10rem;
  width:10rem;
  border:solid 0.5rem black;
}

.as-console-wrapper {
  max-height:50px!important;
}

<div id="item" ></div>