I have timeouts that only initialize when the page is scrolled a certain amount. The problem being that if I scroll to a page and don't wait for the timeout it continues to run into the next page. So I want to clear them when that page is no longer at that scroll offset. I found that you can only clear timeouts by storing them in a variable (ie: let x = setTimeout(func,time)) and then clearing the variable. But if I declare them inside the block statements the other blocks can't access it. But if I make it global it initializes without any condition. When I try encasing the global in a function so it doesn't execute right away (let x = ()=>{setTimeout(func,time)}), then I can no longer clear it for some reason.
contain.addEventListener("scroll",()=>{
// Frame 1
if(contain.scrollTop == 0){
handleAudio2();
handleAudio3();
handleAudio4();
emptyParticlesTwo();
vid.pause();
}
if(contain.scrollTop == window.innerHeight){
setTimeout(()=>{
contain.scrollBy(0,window.innerHeight)},23000)
}
if(contain.scrollTop == window.innerHeight*2){
setTimeout(()=>{
contain.scrollBy(0,window.innerHeight)},23000)
}})
Just save the timeout id in a variable that is in a scope outside of the if statements. I would also recommend combining your two if statements, or putting an else before the second one. The way you have posted them here, the 2nd is redundant (it looks like it the 2nd 'if' shouldn't be in the timeout function)
var toID;
if(contain.scrollTop == window.innerHeight){
toID = setTimeout(()=>{
contain.scrollBy(0,window.innerHeight)},23000)
}
if(contain.scrollTop == window.innerHeight*2){
toID = setTimeout(()=>{
contain.scrollBy(0,window.innerHeight)},23000)
}})