0

私はウェブサイトをレスポンシブにしていますが、これまでのところかなりうまく機能していますが、現在私が抱えている問題は、ウィンドウサイズを繰り返しすばやく変更すると、jQuery を無視しているように見えることです。これが発生すると、「display:none;」となるはずの要素が 条件が満たされると、ページに残ります。

CSS は単純です。

body:after{display:none; content:"default";}
@media only all and (max-width: 800px){
    body:after{content:"tablet";}
}

jquery は次のようになります。

jQuery(document).ready(function($) {
    var currentSize = "default";
    var lazyLayout = _.debounce(function(e) {
    }, 300, true);
    $(window).resize(lazyLayout,function() {
            var size = window.getComputedStyle(document.body, ':after').getPropertyValue('content');
            /* Ridiculous thing to deal with inconsistent returning of 
            value from query. Some browsers have quotes some don't */
            size = size.replace(/"/g, "");
            size = size.replace(/'/g, "");
            if (size != currentSize) {
                if (size == 'tablet') {
                    var count = $('#mobileNav').length;
                    if (count < 1) {
                        var data = {
                        dataType: "HTML",
                        action: 'nav_media_query',
                        nonce: myAjax.nonce
                    };
                    $.post( myAjax.url, data, function( data ) {
                        $('#content-wrapper').removeClass('col-4-5');
                        $('#trending-Container').addClass('mobileNavStyle');
                        $('#trending-Container').append(data);
                        });
                    currentSize = 'tablet';
                    }

                }  
                if(size == 'default') {
                    $('#mobileNav').remove();
                    currentSize = 'default';
                }
            }
    }).resize();

});//end function

これは、メディアクエリが読み込まれたかどうかを確認しますが、コンテンツ属性を探してから、ajax リクエストを開始し、ワードプレスの php を要素に読み込みます。

ウィンドウのサイズをゆっくりと変更すると完全に機能しますが、ウィンドウをすばやく繰り返し調整すると壊れます。

壊れないようにするために使用できるjQuery関数はありますか?

編集: _.js デバウンス メソッドを追加するようにコードを更新しました。これは ajax リクエストを制限するのに役立ちます。ただし、要件が満たされなくなった後に要素が削除されないという問題は引き続き発生します。

4

2 に答える 2

1

待機するサイズ変更関数内で関数を呼び出すようにしてください。それが機能するかどうかはよくわかりませんが、次のような方法で jquery で遅延関数を使用してみてください。

setTimeout(showpanel, 1000)

function showpanel() {     
  //Code that you want to execute
}
于 2013-10-15T23:36:27.753 に答える