元素如果重复触发，则忽略jQuery。

Question

我正在制作一个响应性很强的网站，到目前为止，它运行得相当不错，但目前我遇到的一个问题是，如果我反复和快速地更改窗口大小，它似乎忽略了jQuery。当发生这种情况时，应该在页面上保留一个应该“显示:无”的元素；当满足条件时，该元素将被留在页面上。

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删除方法，这将有助于限制ajax请求。但是，在需求不再满足之后，元素未被移除的问题仍然存在。

Answer 1

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

setTimeout(showpanel, 1000)

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

Answer 2

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