jquery JavaScript窗口调整功能,只触发宽度或高度的变化,而不是两者兼而有之?

ddhy6vgd  于 2023-10-17  发布在  jQuery
关注(0)|答案(1)|浏览(93)

我想写一个JavaScript函数,它只在调整窗口宽度时触发,而不是在调整窗口高度时触发(反之亦然)。
我知道jQuery中存在$(window).on('resize')函数。但它会在窗口宽度或高度调整大小时触发;据我所知,它无法孤立地在一个维度或另一个维度上发生变化。
我提出了一个hack-y解决方案,它将以前的窗口宽度存储为变量,然后在调用resize函数时不断更新它,并将新值与旧值进行比较。然而,对于这样一个简单的操作,这种解决方案似乎不必要地占用大量内存。
是否有一种更简单/内存占用更少的方法来检测单个窗口维度中的更改?

// 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();
        }
    });
azpvetkf

azpvetkf1#

只需要使用一个宽度或高度变量:
使用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:刚刚注意到你已经知道这个解决方案,但仍然决定把它留在这里给未来的读者.

相关问题