元素忽略jQuery，如果重複觸發

我正在使網站響應，迄今爲止它的工作相當好，我現在有一個問題，雖然，如果我反覆快速更改窗口大小似乎忽略jQuery的。當發生這種情況時，應該「顯示：無;」的元素條件滿足時留在頁面上。元素忽略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請求。不滿足要求後元素未被移除的問題仍然存在。

來源

2013-10-15 UzumakiDev

如果您打算髮送ajax請求來調整大小或滾動事件，那麼您迫切需要使用限制或去抖動。在underscore.js – ahren

@ahren有節流和去抖動方法謝謝，將應用節流或反彈停止問題？我肯定會應用它，但對這個問題是否會停止感到好奇。 – UzumakiDev

這肯定會有所幫助 - 基本上，大多數現代瀏覽器都會迅速地觸發調整大小和滾動事件，因此您發送的數百甚至數千個Ajax請求數量很少，並且會導致服務器或客戶端試圖處理所有請求。特別是因爲它本質上是異步的，所以你不能保證按照你發送它們的順序得到響應。 – ahren

嘗試在等待的resize函數內調用一個函數。我不是很確定這是否會工作，但嘗試使用延時功能jQuery中以這種方式：

setTimeout(showpanel, 1000) 

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

來源

2013-10-15 23:36:27 tslater

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

來源

2013-10-16 15:23:57 UzumakiDev

元素忽略jQuery，如果重複觸發

回答

相關問題