1

そのため、ブラウザのサイズが特定のポイントまで縮小されたときに一度起動したい関数があります。

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

これは正常に機能し、650px を超えてサイズを変更すると、関数は 1 回だけ実行されます。

私が抱えている問題は、サイズを元に戻すことです。

650px を超えてサイズを変更したら、別の関数を起動したいと思います。

唯一の違いは、on ではなく jPM.off() です。

これの要点は、ブラウザーが 650px より小さい場合は jPanelMenu をオンにし、ブラウザーが 650px より大きい場合はオンに戻すことです。別の問題は、これを何度も繰り返す必要があることだと思います。

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 に答える