Question

当在400px断点下调整窗口大小时，我需要调用一个函数。处理此问题的显而易见的解决方案是观看window.resize()事件，如下所示：

Window.Resize解决方案

脚本：

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

Window.resize Fiddle

然而，当调整大小发生时，这会持续触发，这可能会导致数百次调用此函数，并会在不需要的时间触发，例如从300px调整为200px;

在尝试寻找避免这种情况的方法时，我想出了一个使用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监视窗口调整大小为400px然后将任意过渡应用于不可见元素。完成后，transitionend事件被触发，侦听器调用我的函数。这仅在屏幕低于400px时发生一次，而在高于400px时发生一次。

当然，这个解决方案存在缺陷：

IE8 / IE9不支持transitionend
您必须为要观看的每个调整大小事件创建不必要的元素
代码本质上更令人困惑，因为它是一个＆＃34; hacky＆＃34;技术。

但除了那些垮台之外，我想知道如果你想避免连续通话，这种方法是否会更有效/更好用。或者，无论如何，媒体查询的底层实现比resize事件做更多的工作。

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会起作用，但保持同步似乎很麻烦。

用CSS媒体查询替换观看window.resize？

1 个答案: