See Example

Question

因此，当浏览器调整到某个特定点时，我想要触发ONCE功能。

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

这样可以正常工作，一旦我们调整大小超过650px，该功能只运行一次。

我遇到的问题是重新调整大小。

一旦我们重新调整大小超过650px，我想发射另一个函数。

唯一不同的是jPM.off（）而不是on。

这一点的重点是当浏览器小于650px时打开jPanelMenu，并在浏览器大于650px时重新打开。我想另一个问题是我需要一遍又一遍地发生这种情况。

使用jQuery（window）.bind（'resize ....只要浏览器正在调整大小，就会反复激活函数。所以jPM.on（）会运行50次并继续初始化插件，这造成了巨大的混乱。

有人对我有任何提示吗？

谢谢！

Answer 1

一个简单的解决方案是使用'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.

Answer 2

你最好的选择是使用计时器。我通过窗口调整大小来做这件事。我发现1/4秒是一个很棒的时间！

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

火力大小事件一旦大小下降，一次大小上升

2 个答案:

See Example