javascript - JQuery如何像css3一样进行条件调整？

Question

现在我的网站有使用同位素显示在两列中的项目。问题是，当您更改页面大小时，我的网站会响应，帖子将开始重叠。现在我正在使用一个方向改变监听器，但我的函数被每个像素调用，因此无缘无故地导致大量 CPU 负载。现在我要做的是让它只在满足特定条件时运行代码，就像在 css3 中一样。例如，如果页面变为小于 600 像素，则运行函数 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

查看isotope中包含的smartresize 插件。在幕后，它使用了一种去抖动技术，这样调整大小的方法就不会被淹没。

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())
});