javascript - 为什么我的第二个脚本不知道第一个脚本中的功能？

Question

函数 ScrollToStage 正在使用waitForScrollEnd第一个脚本中定义的函数。如果我不在这里复制这个函数它不起作用，我得到一个reference error function waitForScrollEnd is not defined......它非常难看，我不能让我的代码那样。我能做些什么 ？

@push('scripts')
        <script src="{{asset('js/home/home.js')}}"></script>
        <script>

            function scrollHandler(element = null) {
                return {
                    height: 0,
                    element: element,
                    calculateHeight(position) {
                        const distanceFromTop = this.element.offsetTop
                        const contentHeight = this.element.clientHeight
                        const visibleContent = contentHeight - window.innerHeight
                        const start = Math.max(0, position - distanceFromTop)
                        const percent = (start / visibleContent) * 100;
                        requestAnimationFrame(() => {
                            this.height = percent;
                        });
                    },
                    init() {
                        this.element = this.element || document.body;
                        this.calculateHeight(window.scrollY);
                    }
                };
            }

            let listFormations = document.getElementById('list-formations');
            function scrollToStage(upOrDown) {

                let myCurrentStage = parseInt(listFormations.__x.$data.currentStage);
                console.log('stage'+(myCurrentStage+1));

                let nextStage = document.getElementById('stage'+(myCurrentStage+1));
                let previousStage = document.getElementById('stage'+(myCurrentStage-1));

                if (upOrDown === 'down'){
                    //console.log(nextStage);
                    if(typeof(nextStage) != 'undefined' && nextStage != null){

                        nextStage.scrollIntoView({behavior: "smooth"});

                        callbackAfterScroll = () => {
                            window.scrollTo({top: window.pageYOffset-175, behavior:"smooth"});
                        }
                        waitScrollEnd();

                        listFormations.__x.$data.currentStage++;
                    }

                }else if(upOrDown === 'home'){
                    document.getElementById('stage0').scrollIntoView({behavior: "smooth"});

                    callbackAfterScroll = () => {
                        window.scrollTo({top: window.pageYOffset-300, behavior:"smooth"});
                    }
                    waitScrollEnd();

                    listFormations.__x.$data.currentStage = 0 ;
                }
                else{
                    //console.log(previousStage);
                    if(typeof(previousStage) != 'undefined' && previousStage != null){

                        previousStage.scrollIntoView({behavior: "smooth"});

                        callbackAfterScroll = () => {
                            window.scrollTo({top: window.pageYOffset-175, behavior:"smooth"});
                        }
                        waitScrollEnd();

                        listFormations.__x.$data.currentStage--;

                    }
                }

            }

            let timer = null

            function waitScrollEnd(){
                timer = null
                window.addEventListener( 'scroll', listenScroll,true);
            }

            function listenScroll(){
                clearTimeout(timer)
                timer = setTimeout( () => {
                    /*console.log("scroll stop")*/
                    callbackAfterScroll();
                    window.removeEventListener( 'scroll', listenScroll,true);
                    callbackAfterScroll = null
                }, 100 )
            }


        </script>
    @endpush

这是 home.js 中的 waitScrollEnd ，它完全相同，但如果我不复制它，它就不起作用：

let timer = null
function waitScrollEnd(){
    timer = null
    window.addEventListener( 'scroll', listenScroll,true);
}

function listenScroll(){
    clearTimeout(timer)
    timer = setTimeout( () => {
        /*console.log("scroll stop")*/
        callbackAfterScroll();
        window.removeEventListener( 'scroll', listenScroll,true);
        callbackAfterScroll = null
    }, 100 )
}

我检查了 home.js 中是否存在 waitScrollEnd 并已加载，但出现此错误：Alpine Error: "ReferenceError: waitScrollEnd is not defined"

标签： javascriptalpine.js

Answer 1

//First js
function myFunction(x) {
    var opacity = x.options[x.selectedIndex].value;
    var el = document.getElementById("p1");
    if (el.style.opacity !== undefined) {
        el.style.opacity = opacity;
    } else {
        alert("Your browser doesn't support this!");
    }
}

//Second js
function myFunction() {
    var x = document.getElementById("myTopnav");
        if (x.className === "topnav") {
        x.className += " responsive";
    } else {
        x.className = "topnav";
    }
}