如何解决clearTimeout在变量初始化前调用的作用域问题？

我太懂你这个困扰了——想在函数里先清除上一次的定时器，结果刚调用clearTimeout就报错，说变量还没初始化，简直头疼对吧？咱们来拆解问题，再看怎么解决。

原问题的根源 #

你最初的代码里，splashTimeout是用let在splashHandler函数内部声明的，而且是在clearTimeout之后才初始化。这就导致第一次调用函数时，执行到clearTimeout(splashTimeout)的瞬间，这个变量还没被定义，直接触发ReferenceError，根本走不到后面的定时器初始化步骤。

解决思路：把定时器变量提到外层作用域 #

核心就是让clearTimeout能访问到定时器变量，哪怕它还没被赋值为有效的定时器实例。咱们把变量声明移到函数外面，让它处于一个能被处理函数访问到的作用域里，这样每次调用函数都能操作同一个变量。

修正后的代码（结合你更新的版本优化） #

// 把定时器变量声明在函数外部，指定类型为NodeJS.Timeout或undefined，更严谨
let splashTimeout: NodeJS.Timeout | undefined;

const splashTimeoutHandler = () => {
  showSplash = true;

  // 先检查定时器是否存在，存在就清除上一次的定时器
  if (splashTimeout) {
    clearTimeout(splashTimeout);
  }

  // 重新设置新的定时器，并覆盖变量值
  splashTimeout = setTimeout(() => {
    showSplash = false;
  }, 2000);
};

代码解释 #

• 外层声明的splashTimeout初始是undefined，第一次调用函数时，if (splashTimeout)会跳过清除步骤，直接设置新的定时器；
• 之后每次调用函数，都会先清除上一次还在运行的定时器，再设置新的，这样就不会出现多个定时器同时触发的情况；
• 用NodeJS.Timeout | undefined指定类型，是为了符合TypeScript的类型检查要求，避免类型报错。

备注：内容来源于stack exchange，提问作者lache