Something to Know About Resizing in JavaScript

Photo by Adrian Trinkaus on Unsplash

How hard can it be? Just call
window.addEventListener(“resize”, (event) => {});
and do whatever you need to do!

It’s a bit more complex than that. Depending on user behaviour the solution above might be not the optimal one.

Let’s ask yourself — why does the user want to resize the browser? As for me, I resize it very rarely and most of the time it opens in a maximise mode.

But some users might resize the browser to fit another app next to it, for example. To achieve that, the user will move the arrow to the edge of the browser’s window so it becomes double arrow ↔, then starts to drag the window until it looks like user wants to.

How often will the resize event fire? Depending on the number of user’s drags, it can be quite a lot of times. Imagine what will happen with your page if you attach costly recalculations, reinitialise sliders, reload images, videos etc on each resize event?

So what you should do to prevent calling the resize event multiple times is simply set a delay before firing the event.

Here’s how you can achieve that:

addEventListener("resize", (event) => {
  console.log("resized normally");
});

window.addEventListener("resize", resizeThrottler, false);

let resizeTimeout; // timeout ID
function resizeThrottler() {
  // ignore resize events as long as an actualResizeHandler execution is in the queue
  if (!resizeTimeout) {
    // set a timeout to prevent multiple event’s firing
    resizeTimeout = setTimeout(function () {
      resizeTimeout = null;
      actualResizeHandler();

      // The actualResizeHandler will execute at a rate of 15fps
    }, 66);
  }
}

function actualResizeHandler() {
  // handle the resize event
  console.log("resized per 15fps");
}

Check the demo below — open a console and resize the frame. Notice how often the regular resize event fires and how often the delayed one:

But what if you want to fire the resize event only on the device orientation change?

Previously, we had the orientationchange event, which is fired when the orientation of the device has changed. It is deprecated now. So instead, you should use the change event of the ScreenOrientation interface.

The ScreenOrientation interface of the Screen Orientation API provides information about the current orientation of the document.

To get the ScreenOrientation instance object use the screen.orientation property:

screen.orientation.addEventListener("change", (event) => {
  const type = event.target.type; // document's current orientation type
  const angle = event.target.angle; // document's current orientation angle
  console.log(`ScreenOrientation change: ${type}, ${angle} degrees.`);
});

The property type returns the document’s current orientation type, which can be one of these values: “portrait-primary”, “portrait-secondary”, “landscape-primary”, or “landscape-secondary”.

Using the methods above will help you to detect window’s resize/orientation change events in a more efficient and proper way.

Read my other articles about JavaScript:

Lazy Load for videos with plain JS

Enhancing Web Accessibility: Locking the TAB Button within Modals and Menus

If you find this article helpful — don’t hesitate to clap, subscribe and leave your thoughts in the comments 😊

Thanks for reading!
Stay safe and peace to you!