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 请求并将一些 wordpress php 加载到元素中。

如果我慢慢调整窗口大小，它会完美运行，但如果我快速反复调整窗口，它就会中断。

是否有一些 jQuery 函数可以用来阻止它中断？

编辑：我已经更新了我的代码以添加 _.js debounce 方法，这应该有助于限制 ajax 请求。但是，在不再满足要求后未删除元素的问题仍然存在。

4

2 回答 2

1

尝试在等待的调整大小函数中调用一个函数。我不太确定它是否会起作用，但尝试以这种方式在 jquery 中使用延迟函数：

setTimeout(showpanel, 1000)

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

Undecore.js 解决了这个问题，我只是没有正确应用该功能。

这是结果。

jQuery(document).ready(function($) {
    var currentSize = "default";
    $(window).resize(_.debounce(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') {
                    $('nav').remove('#mobileNav');
                    $('#content-wrapper').addClass('col-4-5');
                    $('#trending-Container').removeClass('mobileNavStyle');
                    currentSize = 'default';
                }
            }
    },200));

});//end function
于 2013-10-16T15:23:57.350 回答