Javascript 每次调整窗口大小时，Resize函数事件会触发2次以上

在我的网站上，我正在尝试修复导航，以便当浏览器从桌面大小调整到手机大小时，手机菜单可以正常工作。我的移动菜单在初始加载时工作，桌面导航在初始加载时工作，但当我在

$（窗口）中运行脚本时。在（'resize'，function（）{}

上，单击脚本中描述的项目，每次重新调整大小后关闭窗口时，事件总是触发

+1

我的意思是，如果我加载页面，将其缩放为手机大小，单击菜单和下拉项，

单击

事件将触发一次。将窗口向外调整大小，然后再向内调整大小，

单击

事件将触发两次，然后触发三次，依此类推，这取决于浏览器的大小调整次数

我不确定我的调整大小脚本中到底发生了什么，它把一切都搞砸了，我想弄清楚这一点，我真是束手无策。通常情况下，人们不会坐在那里将浏览器从桌面调整到手机，但我的老板会在向客户展示他们网站的测试版时这样做，他希望这永远不会成为问题

以下是我的调整大小脚本：

(function( $ ) {

    var id,
        $body = $('body'),
        $window = $( window ),
        $navSlider = $('.nav-slider'),
        $navMask = $( '.nav-mask' ),
        $navToggler = $( '.navbar-toggler' ),
        $parent = $( '.menu-item-has-children' ),
        $parentLink = $( '.dropdown-toggle' ),
        $childContainer = $( '.dropdown-menu' );

    $window.on( 'resize', function( e ) {

        clearTimeout(id);
        id = setTimeout(function() {

            close();

            var width = $window.width();

            if ( width < 992 ) {

                setHeightToNav();

                $navMask.on( 'click', function() { close() } );
                $navToggler.on( 'click', function() { open() } );

                $parentLink.on( 'click', function( e ) {
                    e.preventDefault();
                    var $this = $( this );   
                    $this.data( 'clicked', true );

                    console.log( $this.parent() );

                } )

            }

            if ( width >= 992 ) {
                resetNavHeight();
                console.clear();
            }
        }, 500 );

    } );


    function setHeightToNav() {
        if ( $body.hasClass( 'logged-in' ) ) {
            var $wpAdminBar = $( '#wpadminbar' ).outerHeight();
            $navSlider.css( { top: $wpAdminBar + 'px' } );
        }

        var $navHeight = $( '#header-container' ).outerHeight();
        $navSlider.css( { marginTop: $navHeight + 'px' } );

    }

    function resetNavHeight() {
        if ( $body.hasClass( 'logged-in' ) ) {
            $navSlider.css( { top: 0 + 'px' } );
        }
        $navSlider.css( { marginTop: 0 + 'px' } );
    }

    function close() {
        $body.removeClass( 'has-active-menu' );
        setTimeout( function() {
            $navSlider.removeClass( 'toggling' );
            $parent.removeClass( 'show' );
            $parentLink.attr( 'aria-expanded', false );
            $childContainer.removeClass( 'show' ).removeAttr( 'style' );
            $parentLink.data('clicked', false);
        }, 250 );
        console.log('close()');
    }

    function open() {
        $body.addClass( 'has-active-menu' );
        $navSlider.addClass( 'toggling' );
    }

})( jQuery );

（函数（$）{
变量id，
$body=$（'body'），
$window=$（window），
$navSlider=$（'.nav slider'），
$NAVSMASK=$（'.nav mask'），
$navToggler=$（'.navbar toggler'），
$parent=$（“.菜单项有子项”），
$parentLink=$（'.dropdown-toggle'），
$childContainer=$（'.dropdown menu'）；
$window.on（'resize'，函数（e）{
清除超时（id）；
id=setTimeout（函数（）{
close（）；
var width=$window.width（）；
如果（宽度<992）{
setHeightToNav（）；
$navsmask.on（'click'，function（）{close（）}）；
$navToggler.on（'click'，function（）{open（）}）；
$parentLink.on（'click'，函数（e）{
e、 预防默认值（）；
var$this=$（this）；
$this.data（'clicked'，true）；
log（$this.parent（））；
} )
}
如果（宽度>=992）{
重置导航高度（）；
console.clear（）；
}
}, 500 );
} );
函数setHeightToNav（）{
if（$body.hasClass（'logged-in'））{
var$wpAdminBar=$（'#wpAdminBar'）.outerHeight（）；
$navsslider.css（{top:$wpAdminBar+'px'}）；
}
var$navHeight=$（“#标题容器”）.outerHeight（）；
$navsslider.css（{marginTop:$navHeight+'px'}）；
}
函数resetNavHeight（）{
if（$body.hasClass（'logged-in'））{
$navsslider.css（{top:0+'px'}）；
}
$navsslider.css（{marginTop:0+'px'}）；
}
函数关闭（）{
$body.removeClass（'has active menu'）；
setTimeout（函数（）{
$navsslider.removeClass（'toggling'）；
$parent.removeClass（'show'）；
$parentLink.attr（'aria expanded'，false）；
$childContainer.removeClass（'show'）.removeAttr（'style'）；
$parentLink.data（'clicked'，false）；
}, 250 );
log（'close（）'）；
}
函数open（）{
$body.addClass（'has active menu'）；
$navsslider.addClass（'toggling'）；
}
})（jQuery）；

我尝试了使用和不使用

setTimeout

函数的脚本，结果完全相同

在这个项目中，我们使用的是Bootstrap 4，带有Bootstraps

下拉菜单。_clearMenus（）；

函数在正确的位置被注释掉，因为它与我想要的导航功能冲突

一个链接到一个你可以看到的网站是。如果这对任何事情都重要的话，它也是一个WordPress网站

非常感谢您的帮助。我已经为此忙了好几个小时，现在束手无策。

.on（'click'，function）

不会设置事件侦听器，它会添加一个事件侦听器。如果确实需要在此处设置此侦听器，请在设置之前尝试执行

关闭（'click'）

但请注意，此元素的任何其他“单击”侦听器也将被删除

这是一个快速解决方案。您可以做得更好，但这需要更多的工作（例如，如果您刚刚更改了“显示模式”，则使用布尔值跟踪，然后仅在此时添加或删除事件侦听器）。

。on（'click'，function）

不设置事件侦听器，它会添加一个事件侦听器。请尝试执行

关闭（'click'））

如果您确实需要在此处设置此侦听器，请在设置它之前

但请注意，此元素的任何其他“单击”侦听器也将被删除

---

这是为了快速修复。您可以做得更好，但这需要更多的工作（例如，如果您刚刚更改了“显示模式”，则使用布尔值跟踪，然后才添加或删除事件侦听器）.

当您不了解其含义时，在其他事件处理程序中添加新事件侦听器是一种糟糕的做法。您很少需要这样做。您建议如何修改此操作？将所有这些事件侦听器移出resize并检查其内部的窗口宽度（如果需要）。错误的做法是在其他事件处理程序中添加新事件侦听器当您不理解其含义时，事件处理程序。您很少需要这样做。您建议如何修改此操作？将所有事件侦听器移到resize之外，并检查其内部的窗口宽度（如果需要）。当您说“更多工作”时，您指的是在resize函数内或在启动它的正常脚本内，resize可以重新调整ate to。当您说“更多工作”时，您的意思是在resize函数中，或者在启动它的普通脚本中，resize可以与之相关。