触发调整大小事件，一次缩小一次，一次放大一次 [英] Fire resize event once on size down and once on size up

问题描述

所以我有一个功能，希望在将浏览器缩小到某个点时触发一次.

So I have a function I want to fire ONCE when the browser is resized down to a certain point.

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

这很好用，一旦我们将尺寸调整到650px以上，该功能仅运行一次.

This works fine, the function is only ran once, once we resize down past 650px.

我遇到的问题是调整备份大小.

The problem I'm having is resizing back up.

一旦我们将尺寸调整回超过650px，我想触发另一个功能.

I want to fire another function once we've resized back up past 650px.

唯一的区别是jPM.off()而不是on.

The only different would be jPM.off() instead of on.

整个过程的重点是在浏览器小于650px时打开jPanelMenu，在浏览器大于650px时重新打开jPanelMenu.我想另一个问题是我需要一遍又一遍地做这个事情.

The whole point of this is to turn jPanelMenu on when the browser is smaller than 650px and back on once the browser is larger than 650px. I guess another issue is I need this to happen over and over again.

使用jQuery(window).bind('resize ....，只要浏览器调整大小，该函数就会反复触发.因此jPM.on()运行了50次，并不断初始化插件，这造成了巨大的混乱.

Using jQuery(window).bind('resize.... makes the function fire over and over again as long as the browser is resizing. So jPM.on() gets ran like 50 times and keeps initializing the plugin, which is causing a huge mess.

有人对我有什么提示吗?

Does anyone have any tips for me?

谢谢！

推荐答案

一个简单的解决方案是使用标志".在这种情况下，我使用的是html元素的类

A simple solution is to use a 'flag'. In this case, I'm using a class to the html element

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');
    }
});

当然，您可以继续创建一个变量来存储页面的状态(大还是小). 此示例可能更直观"更易于理解.

Of course, you could keep create a variable to store the status of the page (large vs small). This example might be more 'visually' easier to understand.

这是一个使用变量而不是类的示例.

这篇关于触发调整大小事件，一次缩小一次，一次放大一次的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！