为什么我的第二个脚本不知道第一个脚本中的函数？

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 )
}

我检查了waitScrollEnd是否存在于home.js中并加载，我得到了这个错误:高山错误:"ReferenceError: waitScrollEnd is not defined">

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";
}
}