Javascript 元素在重复触发时忽略jQuery

我正在使一个网站具有响应性，到目前为止，它运行得相当好，但我目前面临的一个问题是，如果我反复快速地更改窗口大小，它似乎会忽略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 

jQuery（文档）.ready（函数（$）{
var currentSize=“默认”；
var lazyLayout=u.debounce（函数（e）{
}，300，对）；
$（窗口）。调整大小（lazyLayout，function（）{
var size=window.getComputedStyle（document.body，':after'）.getPropertyValue（'content'）；
/*处理不一致退货的荒谬事情
来自查询的值。有些浏览器有引号，有些没有引号*/
尺寸=尺寸。替换（/“/g，”）；
大小=大小。替换（/“/g，”）；
如果（大小！=当前大小）{
如果（大小=‘平板电脑’）{
变量计数=$（'#mobileNav'）。长度；
如果（计数<1）{
风险值数据={
数据类型：“HTML”，
操作：“导航媒体查询”，
nonce:myAjax.nonce
};
$.post（myAjax.url、数据、函数（数据）{
$（“#内容包装器”）.removeClass（'col-4-5'）；
$（“#趋势容器”）.addClass（'mobileNavStyle'）；
$（“#趋势容器”）.append（数据）；
});
currentSize='平板'；
}
}  
如果（大小=‘默认’）{
$（'#mobileNav'）。删除（）；
currentSize='默认'；
}
}
}).resize（）；
})；//结束函数

这将检查是否加载了媒体查询，但在查找content属性时，它会发出ajax请求并将一些wordpress php加载到元素中

如果我慢慢调整窗口的大小，效果会很好，但是如果我快速重复地调整窗口，它就会崩溃

是否有一些jQuery函数可以用来阻止它崩溃

---

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

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

setTimeout(showpanel, 1000)

function showpanel() {     
  //Code that you want to execute
}

---

Undescore.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 

jQuery（文档）.ready（函数（$）{
var currentSize=“默认”；
$（窗口）.resize（u.debounce（函数（））{
var size=window.getComputedStyle（document.body，':after'）.getPropertyValue（'content'）；
/*处理不一致退货的荒谬事情
来自查询的值。有些浏览器有引号，有些没有引号*/
尺寸=尺寸。替换（/“/g，”）；
大小=大小。替换（/“/g，”）；
如果（大小！=当前大小）{
如果（大小=‘平板电脑’）{
变量计数=$（'#mobileNav'）。长度；
如果（计数<1）{
风险值数据={
数据类型：“HTML”，
操作：“导航媒体查询”，
nonce:myAjax.nonce
};
$.post（myAjax.url、数据、函数（数据）{
$（“#内容包装器”）.removeClass（'col-4-5'）；
$（“#趋势容器”）.addClass（'mobileNavStyle'）；
$（“#趋势容器”）.append（数据）；
});
currentSize='平板'；
}
}  
如果（大小=‘默认’）{
$（'nav'）。删除（'mobileNav'）；
$（“#内容包装器”）.addClass（'col-4-5'）；
$（“#趋势容器”）.removeClass（'mobileNavStyle'）；
currentSize='默认'；
}
}
},200));
});//端函数

如果您要在调整大小或滚动事件时发送ajax请求，则迫切需要使用节流或去抖动。下划线中有节流和去Bouncing方法。js@ahren谢谢，应用节流或去抖动能解决问题吗？我肯定会应用它，但我很好奇这个问题是否会停止。它肯定会有帮助-基本上，大多数现代浏览器会以如此快的速度触发调整大小和滚动事件，你会发送数百甚至数千个ajax请求，这会杀死你的服务器或试图处理所有请求的客户端。特别是因为它本质上是异步的，所以不能保证按照发送响应的顺序获得响应。我注意到，当我使用++var console.log（）进行测试时，您是对的，谢谢。干得好，我没有让它上线那会很糟糕哈。