什么时候使用"JavaScript window resize event with a (..ms) delay"有益

Question

下面的代码使用计时器创建一个"JavaScript窗口调整大小事件"，其中包含(..ms( 延迟"，在本例中，显示和隐藏菜单。简而言之，延迟最大限度地减少了调整大小事件可能使用的计算机资源。但是，延迟并没有足够快地隐藏菜单，并且减少延迟以获得所需的效果，似乎首先击败了对象的延迟。

下面的函数位于Wordpress中一个文档就绪的匿名函数中。将不胜感激对此的意见。谢谢。

 var resizeTimer;
    $(window).on('load resize', function () {
        clearTimeout(resizeTimer);
        resizeTimer = setTimeout(function () {
            if ($(window).width() > 768) {
                $('ul.menu-1').show();
                $('.toggle').hide();
            } else {
                $('ul.menu-1').hide();
                $('.toggle').show();
            }
        }, 100);
    });

Answer 1

我认为这个想法是当窗口调整大小时，它会触发很多次。 因此，快速调整到新大小可以在您真正只需要执行一次代码时调用代码 x 次。

但这是一个常见的陷阱。 大多数不断调整窗口大小的人都是开发人员和设计师，而不是普通的客户/受众。 我不认为删除延迟会影响性能(除非你有一个调整大小的疯狂开发人员在屏幕上去镇上(。

另外，所有这些代码都可以在没有JS的情况下完成 - 只需使用CSS中的媒体查询。

我个人的意见是放弃JS调整大小解决方案以显示/隐藏菜单并使用CSS +媒体查询解决方案。 它会对您的资源更友好，并且更易于维护。