javascript - 将 window.resize 替换为 CSS 媒体查询？

Question

当窗口调整到 400px 断点以下时，我需要调用一个函数。处理这个问题的明显解决方案是像这样观察 window.resize() 事件:

Window.Resize解决方案

脚本:

$(window).resize(function(){
    if($(window).width() < 400)
       console.log("trigger");
});

Window.resize Fiddle

然而，随着调整大小的发生，这会持续触发，这可能会导致对该函数进行数百次调用，并且会在不必要的时候触发，例如从 300 像素调整到 200 像素；

在尝试找到避免这种情况的方法时，我想出了一个使用 CSS 媒体查询的解决方案:

CSS 媒体查询解决方案

脚本:

$(".foo").on('transitionend', function () {
   console.log("trigger")
});

CSS:

.foo
{
    width: 0;
    height: 0;
    color: white;
    transition: 0.1s;
}
@media screen and (max-width: 400px) {
    .foo {
        color: gray;
    }
}

CSS Media Query Fiddle

这里的想法是，CSS 监 window 口大小调整为 400px，然后将任意过渡应用到不可见元素。完成后，将触发 transitionend 事件，监听器将调用我的函数。这只会在屏幕低于 400px 时发生一次，而当它回到 400px 以上时会发生一次。

现在这个解决方案当然有缺陷:

• IE8/IE9不支持transitionend
• 您必须为每个要观看的调整大小事件创建一个不必要的元素
• 代码本质上更容易混淆，因为它是一种“hacky”技术。

但除了那些失败之外，我想知道如果您想避免连续调用，这种方法是否会更有效/更好地使用。或者媒体查询的底层实现比调整大小事件做的工作更多。

Answer 1

我认为您的主要问题是将代码拆分到很多地方。是的，CSS 很好，但是现在您的代码依赖于两个地方!对此进行排序的最简单方法是将您的值简单地存储在 JS 中:

var isSmall = false;
$(window).resize(function(){
    if(
        (window.innerWidth < 400 && !isSmall) ||
        (window.innerWidth > 400 && isSmall)
    ){
        console.log('we have passed the treshold!');
        isSmall = !isSmall;
    }
}).resize();

我想使用 CSS transitionend 会起作用，但保持同步似乎很麻烦。