javascript - 如何使用子主题 js 文件从父主题 main.js 文件中删除 javascript 函数

Question

我有一个主主题的函数，它占用了高达 71% 的成本(devtools profiler)，因为该函数是在每次滚动事件时执行的，并且没有延迟或反跳。尽管如此，该函数在我使用主题的行为中似乎毫无用处，因此我想通过覆盖它来删除它，但无法完成。

main.js 文件中的函数如下所示:

function fusionSideHeaderScroll() {
var $mediaQueryIpad = Modernizr.mq( 'only screen and (min-device-width: 768px) and (max-device-width: 1366px) and (orientation: portrait)' ) ||  Modernizr.mq( 'only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape)' ),
    $documentHeight,
    $windowPosition,
    $windowHeight,
    $bodyHeight,
    $adminbarHeight,
    $sideHeader,
    $sideHeaderWrapper,
    $sideHeaderHeight,
    $boxedWrapperOffset,
    $topOffset;

if ( ! $mediaQueryIpad ) {
    $documentHeight     = jQuery( document ).height();
    $windowPosition     = jQuery( window ).scrollTop();
    $windowHeight       = jQuery( window ).height();
    $bodyHeight         = jQuery( 'body' ).height();
    $adminbarHeight     = jQuery( '#wpadminbar' ).height();
    $sideHeader         = jQuery( '#side-header' );
    $sideHeaderWrapper  = jQuery( '.side-header-wrapper' );
    $sideHeaderHeight   = $sideHeaderWrapper.outerHeight();
    $boxedWrapperOffset = 0;

    if ( jQuery( 'body' ).hasClass( 'layout-boxed-mode' ) && jQuery( 'body' ).hasClass( 'side-header-right' ) ) {
        $sideHeader = jQuery( '.side-header-wrapper' );
        $boxedWrapperOffset = jQuery( '#boxed-wrapper' ).offset().top;
    }

    if ( Modernizr.mq( 'only screen and (max-width:' + avadaVars.side_header_break_point + 'px)' ) ) {

        if ( ! $sideHeader.hasClass( 'fusion-is-sticky' ) ) {
            $sideHeader.css({
                'bottom': '',
                'position': ''
            });
        }

        return;
    }

    if ( $sideHeaderHeight + $adminbarHeight > $windowHeight ) {
        $sideHeader.css( 'height', 'auto' );
        if ( $windowPosition > window.lastWindowPosition ) {
            if ( window.avadaTop ) {
                window.avadaTop = false;
                $topOffset = ( $sideHeaderWrapper.offset().top > 0 ) ? $sideHeaderWrapper.offset().top - $boxedWrapperOffset : $adminbarHeight;
                $sideHeader.attr( 'style', 'top: ' + $topOffset + 'px; height: auto;' );
            } else if ( ! window.avadaBottom && $windowPosition + $windowHeight > $sideHeaderHeight + $sideHeaderWrapper.offset().top && $sideHeaderHeight + $adminbarHeight < $bodyHeight ) {
                window.avadaBottom = true;
                $sideHeader.attr( 'style', 'position: fixed; bottom: 0; top: auto; height: auto;' );
            }
        } else if ( $windowPosition < window.lastWindowPosition ) {
            if ( window.avadaBottom ) {
                window.avadaBottom = false;
                $topOffset = ( $sideHeaderWrapper.offset().top > 0 ) ? $sideHeaderWrapper.offset().top - $boxedWrapperOffset : $adminbarHeight;
                $sideHeader.attr( 'style', 'top: ' + $topOffset + 'px; height: auto;' );
            } else if ( ! window.avadaTop && $windowPosition + $adminbarHeight < $sideHeaderWrapper.offset().top ) {
                window.avadaTop = true;
                $sideHeader.attr( 'style', 'position: fixed; height: auto;' );
            }
        } else {
            window.avadaTop = window.avadaBottom = false;

            $topOffset = ( $sideHeaderWrapper.offset().top > 0 ) ? $sideHeaderWrapper.offset().top - $boxedWrapperOffset : $adminbarHeight;

            if ( $windowHeight > window.lastWindowHeight && $bodyHeight > $sideHeaderWrapper.offset().top  + $boxedWrapperOffset + $sideHeaderHeight && $windowPosition + $windowHeight > $sideHeaderWrapper.offset().top + $sideHeaderHeight ) {
                $topOffset += $windowHeight - window.lastWindowHeight;
            }
            $sideHeader.attr( 'style', 'top:' + $topOffset + 'px; height: auto;' );
        }
    } else {
        window.avadaTop = true;
        $sideHeader.attr( 'style', 'position: fixed;' );
    }

    window.lastWindowPosition = $windowPosition;
    window.lastWindowHeight   = $windowHeight;
}
}

定义函数后，将其绑定(bind)到滚动事件

// Make the side header scrolling happen
jQuery( window ).on( 'scroll', fusionSideHeaderScroll );
jQuery( window ).on( 'resize', fusionSideHeaderScroll );

我已经尝试在我的子主题的 js 文件中写入

 function fusionSideHeaderScroll() {
     //do nothing
 }

在这种情况下，该函数仍然需要执行，这似乎是合乎逻辑的，因为它附加到每个滚动事件。有没有办法用 JavaScript 将函数与滚动事件分离？

Answer 1

尝试使用 .off() 解除滚动和调整大小事件的绑定(bind)，如下所示:

jQuery( window ).off( 'scroll', fusionSideHeaderScroll );
jQuery( window ).off( 'resize', fusionSideHeaderScroll );