1

所以我有一个功能，我想在浏览器缩小到某个点时触发一次。

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

这很好用，一旦我们调整大小超过 650 像素，该函数只运行一次。

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

一旦我们调整大小超过 650 像素，我想触发另一个函数。

唯一不同的是 jPM.off() 而不是 on。

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

使用 jQuery(window).bind('resize.... 只要浏览器调整大小，函数就会一遍又一遍地触发。所以 jPM.on() 运行了 50 次并不断初始化插件，这导致一个巨大的混乱。

有人对我有什么建议吗？

谢谢！

4

2 回答 2

2

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

小提琴

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

当然，您可以继续创建一个变量来存储页面的状态（大与小）。这个例子可能更“直观”更容易理解。

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

于 2013-05-16T19:42:46.923 回答
0

最好的办法是使用计时器。我经常通过调整窗口大小来做到这一点。我发现 1/4 秒是度过的好时光！

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

查看示例

于 2013-05-16T19:39:14.777 回答