Javascript 在交叉点观察者功能和元素转换完成之前，元素CSS属性不会在页面刷新时重置

我有一个网站，我正在使用启动函数向元素添加一个类，然后等待800毫秒，在另外两个元素上启动我的交叉点观察者函数。我遇到的问题是，当我在由intersection observer函数引起的转换期间刷新页面时，第一个元素没有重置为其原始属性，并且第一个函数没有执行。如果不使用交叉点观察者函数，则不会出现此问题

我正在使用Google Chrome在启用实时服务器的情况下测试我的项目

// Get work items
const projects = document.getElementsByClassName('work-item');

// Convert each item to an object and attach observer to each item
function observeLoop() {
for ( i = 0; i < projects.length; i++) {
    projects[i].toObject;
    observer.observe(projects[i])
}
}

// Observer options
const options = {
    root: null,
    rootMargin: '0px',
    threshold: 0.05
}

// Intersection observer callback and options
let observer = new IntersectionObserver( (entries) =>{
    entries.forEach(item => {
        if (item.isIntersecting) {
           item.target.classList.add('show');
        }
      });
}, options);

// Startup function
function init() {
    const title = document.getElementsByClassName('landing-page')[0].classList.add('show-lander');
    setTimeout(observeLoop, 800);
}

// Call startup function
init();

//获取工作项
const projects=document.getElementsByClassName（'work-item'）；
//将每个项目转换为对象，并将观察者附着到每个项目
函数observeLoop（）{
对于（i=0；i{
entries.forEach（项=>{
if（项目isIntersecting）{
item.target.classList.add（'show'）；
}
});
}，选项）；
//启动功能
函数init（）{
const title=document.getElementsByClassName（'landing-page'）[0]。classList.add（'show-lander'）；
setTimeout（observeLoop，800）；
}
//调用启动函数
init（）；