如何实现滚动后或初始延迟后调用防抖函数（JavaScript）

你的核心问题是初始化时应该立即读取并应用localStorage的状态，而不是让它等待防抖延迟。防抖的作用是减少滚动事件触发的频率，但初始化逻辑完全不需要防抖包裹。

优化方案 #

直接在页面加载完成后立即执行一次menuChange，应用本地存储的状态；之后的滚动事件再用防抖处理，这样既保留了防抖的性能优化，又保证了初始状态的即时性。

修改后的代码如下：

JavaScript

const triggerElement = document.getElementById('trigger-element');
const header = document.getElementById('h');

const animationTriggered = localStorage.getItem('animationTriggered') === 'true';
let initialLoad = true;

const menuChange = function() {
  if (animationTriggered && initialLoad) {
    header.style.background = 'black';
  } else if (triggerElement.getBoundingClientRect().top < 50) {
    header.style.background = 'black';
    header.style.transition = '1s';
    localStorage.setItem('animationTriggered', 'true');
  } else {
    header.style.background = 'red';
    header.style.transition = '.15s';
    localStorage.setItem('animationTriggered', 'false');
  }
  initialLoad = false;
}

// 防抖函数
const debounce = (method, delay) => {
    clearTimeout(method._tId);
    method._tId= setTimeout(() => {
        method();
    }, delay);
}

// 初始化时立即应用localStorage状态，无需防抖
menuChange();

// 滚动事件用防抖处理后续状态更新
addEventListener('scroll', ()=> {
    debounce(menuChange, 100);
});

CSS

body {
  margin: 0;
  height: 200vh;
}

#h {
  display: flex;
  justify-content: center;
  background: red;
  color: #fff;
  position: fixed;
  top: 0;
  width: 100%;
}

#trigger-element {
  margin-top: 150px;
  padding: 1rem;
  background:blue;
  color: #fff;
}

HTML

<header id="h">
  <p>HEADER CONTENT</p>
</header>
<div id="trigger-element">Trigger Element</div>

关键改动说明 #

• 页面加载后直接调用menuChange()：这一步会立刻读取localStorage的状态，把菜单设置为正确的样式，完全避开防抖的延迟。
• 滚动事件依然用防抖：用户滚动时，还是会以100ms的频率更新状态，避免频繁触发DOM操作，保证性能。

对比你的两个思路，这个方案比思路b更高效——不需要额外设置1秒超时，初始化逻辑只执行一次，完全符合需求。

内容的提问来源于stack exchange，提问作者paulo77