Javascript 窗口调整大小功能仅在宽度或高度变化时触发，而不是两者都触发？

Question

我想编写一个Javascript函数，它仅在调整窗口宽度大小时触发，而不是在调整窗口高度大小时触发（反之亦然）。 我知道 jQuery 中存在

$(window).on('resize')

函数。但当窗口宽度或高度调整大小时，它会触发；据我所知，它无法隔离一个维度或另一个维度的变化。

我提出了一个 hack-y 解决方案，它将以前的窗口宽度存储为变量，然后在调用调整大小函数时不断更新它，并将新值与旧值进行比较。然而，对于这样一个简单的操作，这个解决方案似乎不必要地占用大量内存。

有没有一种更简单/占用内存更少的方法来检测单个窗口维度的变化？

    // Create a variable to store the width of the window
    var windowWidth = $(window).width();

    // When the window is resized...
    $(window).on('resize', function(){

        // If the window width has changed...
        if(windowWidth != $(window).width()) {

            // Store new window width in the variable and run my function
            windowWidth = $(window).width();

            executeMyDesiredCode();
        }
    });

Answer 1

使用 ResizeObserver：

var prevWidth = window.width;
var observer = new ResizeObserver(function(entries) {
    const width = entries[0].borderBoxSize?.[0].inlineSize;
    if (typeof width === 'number' && width !== prevWidth ) {
        prevWidth = width;
        console.log(width);
    }
})
observer.observe(window.document.body);

使用 onResize 事件：

var prevWidth = window.innerWidth;
window.addEventListener('resize', function() {
    if (window.innerWidth !== prevWidth ) {
        prevWidth = width;
        console.log(width);
    }
});

PS：刚刚注意到您已经知道这个解决方案，但仍然决定将其留在这里供未来的读者...