如何为EventListener内的多个函数设置相同的setTimeout值

开发个人作品集时，希望为导航链接添加跳转延迟效果，使用setTimeout实现时遇到问题：将事件监听包装进函数后，无论在函数内还是外部调用setTimeout都无法生效，只有在每个addEventListener回调内单独设置setTimeout才能正常工作。相关代码如下：

无效代码1：外部设置setTimeout #

//------ NOT WORKING (Outside EventListener) ------//

function firstLink(){
  HomePageH.addEventListener('click', ()=> {
    window.location.href = '../index.html';
  })
}

function secondLink(){
  AboutMeH.addEventListener('click', ()=> {
    window.location.href = rootURL + '#about-me';
  })
}

function thirdLink(){
  WorksIDoH.addEventListener('click', ()=> {
    window.location.href = rootURL + '#work-i-do';
  })
}

setTimeout(() => {
  firstLink();
  secondLink();
  thirdLink();
}, waitTime);

无效代码2：监听内部定义函数但不执行 #

//------ NOT WORKING (Inside EventListener) ------//

HomePageH.addEventListener('click', ()=> {
  function firstLink(){
    window.location.href = '../index.html';
  }
})

AboutMeH.addEventListener('click', ()=> {
  function secondLink(){
    window.location.href = rootURL + '#about-me';
  }
})

WorksIDoH.addEventListener('click', ()=> {
  function thirdLink(){
    window.location.href = rootURL + '#work-i-do';
  }
})

setTimeout(() => {
  firstLink();
  secondLink();
  thirdLink();
}, waitTime);

有效但冗余的代码 #

//------ WORKING CODE (But have to apply timeout again and again) ------//

HomePageH.addEventListener('click', ()=> {
  setTimeout(() => {
    window.location.href = '../index.html';
  }, waitTime);
});   

AboutMeH.addEventListener('click', ()=> {
  setTimeout(() => {
    window.location.href = rootURL + '#about-me';
  }, waitTime);
});

WorksIDoH.addEventListener('click', ()=> {
  setTimeout(() => {
    window.location.href = rootURL + '#work-i-do';
  }, waitTime);
});

1. 无效代码1：这里的setTimeout是延迟绑定事件监听，而非延迟跳转逻辑。等待waitTime后才给元素绑定点击事件，但用户点击时，跳转是立即执行的，完全没有延迟效果。
2. 无效代码2：点击事件触发时仅定义了跳转函数，但从未调用该函数；同时外部setTimeout中调用的firstLink、secondLink等函数属于监听回调的内部作用域，外部无法访问，执行时会直接报错。

可以封装一个通用的延迟跳转函数，避免重复编写setTimeout逻辑，代码更简洁可维护：

// 定义全局变量（根据实际情况调整值）
const waitTime = 1000; 
const rootURL = '/';

// 通用延迟跳转函数
function delayedRedirect(targetUrl) {
  setTimeout(() => {
    window.location.href = targetUrl;
  }, waitTime);
}

// 批量绑定事件监听
HomePageH.addEventListener('click', () => delayedRedirect('../index.html'));
AboutMeH.addEventListener('click', () => delayedRedirect(`${rootURL}#about-me`));
WorksIDoH.addEventListener('click', () => delayedRedirect(`${rootURL}#work-i-do`));

如果需要更高效的批量处理，还可以用数组存储元素和对应链接，循环绑定：

// 定义全局变量
const waitTime = 1000; 
const rootURL = '/';

// 存储元素与目标链接的映射
const linkConfigs = [
  { element: HomePageH, url: '../index.html' },
  { element: AboutMeH, url: `${rootURL}#about-me` },
  { element: WorksIDoH, url: `${rootURL}#work-i-do` }
];

// 通用延迟跳转函数
function delayedRedirect(targetUrl) {
  setTimeout(() => {
    window.location.href = targetUrl;
  }, waitTime);
}

// 循环绑定事件
linkConfigs.forEach(config => {
  config.element.addEventListener('click', () => delayedRedirect(config.url));
});

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