jQuery Window Resize Event Handling: From Basic Implementation to Performance Optimization

Window Resize Event Fundamentals

In frontend development, handling browser window resizing is a common requirement. The user's initial problem was checking window height and adjusting footer styles accordingly when the document loads, but they wanted the same logic to trigger when the window size changes.

The original jQuery code only executes once when the document is ready:

$(document).ready(function () {
    var $containerHeight = $(window).height();
    if ($containerHeight <= 818) {
        $('.footer').css({
            position: 'static',
            bottom: 'auto',
            left: 'auto'
        });
    }
    if ($containerHeight > 819) {
        $('.footer').css({
            position: 'absolute',
            bottom: '3px',
            left: '0px'
        });
    }
});

jQuery Resize Event Implementation

To make the code execute when the window is resized, you need to use jQuery's resize event. According to jQuery's official documentation, you can use the .on('resize', handler) method to bind an event handler function.

The improved complete code is as follows:

$(document).ready(function () {
    // Execute initially once
    adjustFooter();
    
    // Bind resize event
    $(window).on('resize', function() {
        adjustFooter();
    });
    
    function adjustFooter() {
        var $containerHeight = $(window).height();
        if ($containerHeight <= 818) {
            $('.footer').css({
                position: 'static',
                bottom: 'auto',
                left: 'auto'
            });
        } else {
            $('.footer').css({
                position: 'absolute',
                bottom: '3px',
                left: '0px'
            });
        }
    }
});

Comparison of Multiple Implementation Approaches

Pure JavaScript Implementation

Using native JavaScript's window.onresize can also achieve the same functionality:

window.onresize = function() {
    if (window.innerHeight >= 820) {
        // Perform corresponding operations
    }
    if (window.innerWidth <= 1280) {
        // Perform corresponding operations
    }
}

CSS Media Query Solution

For pure style adjustments, CSS media queries are usually a better choice because they offer better performance and don't require JavaScript:

.footer {
    /* Default styles */
}

@media screen and (min-height: 820px) {
    .footer {
        position: absolute;
        bottom: 3px;
        left: 0px;
    }
}

Performance Optimization: Debounce and Throttle

A major issue with the resize event is that it fires frequently when the user is resizing the window, which can cause performance problems. Different browsers implement this differently—some fire events continuously during resizing, while others fire only once at the end.

Debounce Technique

Debounce ensures that a function is only executed after a specified time interval has passed since the last call. This is particularly useful for resize events because we typically only care about the final dimensions after the user stops resizing.

Implementation using lodash's debounce:

$(document).ready(function () {
    var adjustFooter = function() {
        var $containerHeight = $(window).height();
        if ($containerHeight <= 818) {
            $('.footer').css({
                position: 'static',
                bottom: 'auto',
                left: 'auto'
            });
        } else {
            $('.footer').css({
                position: 'absolute',
                bottom: '3px',
                left: '0px'
            });
        }
    };
    
    // Use debounce with 250ms delay
    var debouncedAdjust = _.debounce(adjustFooter, 250);
    
    // Initial execution
    adjustFooter();
    
    // Bind debounced resize event
    $(window).on('resize', debouncedAdjust);
});

Throttle Technique

Throttle ensures that a function is executed at most once in a specified time interval. This is useful in scenarios where real-time response is needed but you don't want updates to be too frequent.

// Using lodash's throttle
var throttledAdjust = _.throttle(adjustFooter, 100);
$(window).on('resize', throttledAdjust);

Manual Debounce Implementation

If you're not using third-party libraries, you can implement a simple debounce function manually:

function debounce(func, wait) {
    var timeout;
    return function() {
        var context = this, args = arguments;
        clearTimeout(timeout);
        timeout = setTimeout(function() {
            func.apply(context, args);
        }, wait);
    };
}

// Using manually implemented debounce
var debouncedAdjust = debounce(adjustFooter, 250);
$(window).on('resize', debouncedAdjust);

Best Practice Recommendations

When choosing an implementation approach, consider the following factors:

CSS Media Queries: For pure style adjustments, this is the best choice with optimal performance and no JavaScript required.

JavaScript Solutions: Use when you need to execute complex logic or dynamic calculations.

Performance Optimization: Always consider using debounce or throttle techniques to optimize resize event handling.

Browser Compatibility: Be aware of differences in resize event firing frequency across different browsers.

By appropriately selecting implementation methods and applying performance optimization techniques, you can create responsive interfaces that are both responsive and performant.