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 debounce方法，这应该有助于限制ajax请求。不再满足要求后元素未被删除的问题仍然存在。

Answer 1

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

setTimeout(showpanel, 1000)

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

Answer 2

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

2 个答案: