jquery 在减小大小时激发一次resize事件，在增大大小时激发一次

muk1a3rh 于 2023-01-08 发布在 jQuery

关注(0)|答案(3)|浏览(150)

因此，我有一个函数，我想火灾一次，当浏览器的大小下降到一定的点。

largeWindow = window.matchMedia( 'screen and (min-width: 650px)' );
jQuery( window ).on('resize', function() {
    if ( ! largeWindow.matches ) {
        jPM.on();
        jQuery(window).off('resize');
    }
});

这很好用，函数只运行一次，一旦我们把大小调整到650 px以上。
我遇到的问题是重新调整大小。
我想激发另一个函数，一旦我们重新调整大小超过650 px。
唯一的区别是jPM.off（）而不是on。
这样做的全部意义是在浏览器小于650 px时打开jPanelMenu，并在浏览器大于650 px时重新打开。我想另一个问题是我需要一次又一次地这样做。
使用jQuery（window）.bind（'resize....会使函数在浏览器调整大小时一次又一次地触发，因此jPM.on（）会运行大约50次，并不断地初始化插件，这造成了巨大的混乱。
有人能给我点建议吗？
谢谢！

jquery

来源：https://stackoverflow.com/questions/16595864/fire-resize-event-once-on-size-down-and-once-on-size-up

3条答案

按热度按时间

inb24sb21#

一个简单的解决方案是使用“flag”。在本例中，我对html元素使用了一个类
FIDDLE

$(window).on('resize', function() {
    if ((!$('html').hasClass('small')) && ($(window).width() < 650)) {
        $('#output').text('small');
        $('html').addClass('small').removeClass('large');
    }
    else if ((!$('html').hasClass('large')) && ($(window).width() > 650)) {
        $('#output').text('large');
        $('html').addClass('large').removeClass('small');
    }
});

当然，你可以继续创建一个变量来存储页面的状态（大与小），这个例子可能更“直观”，更容易理解。
Here's an example with a variable instead of a class.

赞(0）回复(0）举报 2023-01-08

cbeh67ev2#

你最好的选择是使用计时器。我经常用它来调整窗口大小。我发现1/4秒是一个很好的时间！

jQuery(function() {
    var windowResize;
    jQuery(window).resize(function(e) {
        clearTimeout(windowResize);
        windowResize = setTimeout(function() {
            /*
                DO WORK
            */
        }, 250);
    });
})

∮ ∮ ∮

赞(0）回复(0）举报 2023-01-08

daupos2t3#

如果有人遇到这种情况，一个更现代的方法是使用MediaQueryList对象而不是resize事件，例如。

const onMQLResize = (e) => {
    if (e.matches) {
        // do your thing
    }
}
const mql = window.matchMedia('screen and (min-width: 650px)');
mql.addEventListener('change', onMQLResize);

赞(0）回复(0）举报 2023-01-08

我来回答

jquery 在减小大小时激发一次resize事件，在增大大小时激发一次

3条答案

相关问题

热门标签

最新问答