JQuery如何做到像css3一樣調整條件？

Question

現在我的網站上有兩列使用同位素顯示的項目。問題是因爲當您更改帖子開始重疊的頁面大小時，我的網站會作出響應。現在我正在使用方向更改偵聽器，但是我的函數正在針對每個像素進行調用，因此無緣無故導致大量CPU負載。現在我想要做的是隻有在css3中滿足某些條件時才運行代碼。例如，如果頁面變爲小於600px，那麼運行函數X，但只有在尺寸小於該尺寸時才需要運行，所以如果它低於550像素或350像素，它將不會運行。這是我的代碼目前的樣子。 ReloadPosts只是告訴同位素刷新

var supportsOrientationChange = "onorientationchange" in window, 
orientationEvent = supportsOrientationChange ? "orientationchange" : "resize"; 

window.addEventListener(orientationEvent, function() { 
    reloadPosts(); 
}, false); 

Answer 1

可能，這將幫助你

 $(window).resize(function(){ 
     setTimeout(doResizing,200); 

    }); 


    function doResizing() { 
     if ($(window).width() > 601) { /* do stuff */ } 
     if ($(window).width() < 600) { /* do stuff */ } 


    }; 

    doResizing(); 

}); 

Answer 2

看一看的smartresize plugin是included with isotope。在幕後，它使用了一種去抖動技術，這樣resize方法就不會被淹沒。

var $container = $('#container') 

// when you setup isotope, disable normal resizing 
$container.isotope({ 
    // options... 
    resizable: false 
}); 

$(window).smartresize(function(){ 
    // code to handle resizing (i.e. reloadPosts()) 
});