Handling Resize Events in JavaScript

So you’re diving into JavaScript and want to handle the browser resize event? Awesome! It’s super important for making responsive designs. But yeah, the resize event can fire a ton of times while a user is dragging the window, which can definitely bog things down.

Setting Up the Resize Event Listener

First off, yes, you can add an event listener for the resize event like this:

window.addEventListener('resize', yourFunction);
    

The issue, though, is that yourFunction will get called way too often if the user is resizing the window quickly. That’s where debouncing or throttling comes into play!

Debouncing vs. Throttling

Debouncing means you’ll delay the function execution until the user has stopped resizing for a certain amount of time. Throttling, on the other hand, guarantees that your function only runs at a certain rate (like once every 100 milliseconds). Here’s a simple example of debouncing:

function debounce(func, wait) {
    let timeout;
    return function executedFunction(...args) {
        const later = () => {
            clearTimeout(timeout);
            func(...args);
        };
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
    };
}

window.addEventListener('resize', debounce(() => {
    console.log('Resize event fired!');
}, 250));
    

This will fire the resize handler only after the user has stopped resizing for 250 milliseconds.

Throttling Example

And here’s a basic throttle function:

function throttle(func, limit) {
    let lastFunc;
    let lastRan;

    return function() {
        const context = this;
        const args = arguments;
        if (!lastRan) {
            func.apply(context, args);
            lastRan = Date.now();
        } else {
            clearTimeout(lastFunc);
            lastFunc = setTimeout(() => {
                if ((Date.now() - lastRan) >= limit) {
                    func.apply(context, args);
                    lastRan = Date.now();
                }
            }, limit - (Date.now() - lastRan));
        }
    };
}

window.addEventListener('resize', throttle(() => {
    console.log('Resize event throttled!');
}, 100));
    

Adjusting Based on Screen Width

As for different functions based on screen width, you can totally do that! Inside your debounced or throttled function, you can check the window width and do different things:

window.addEventListener('resize', debounce(() => {
    if (window.innerWidth > 768) {
        console.log('Desktop view - make some adjustments!');
        // Your desktop adjustments here
    } else {
        console.log('Mobile view - adjust for mobile!');
        // Your mobile adjustments here
    }
}, 250));
    

Conclusion

That’s pretty much the gist of it! Using debouncing or throttling will help keep things smooth when resizing. Just give it a shot and tweak it as needed for your app. Happy coding!