TypeScript实现条件触发代码、定时检查及超时终止的方案咨询

为什么other code会提前执行？ #

根本原因是setInterval属于异步宏任务，它的回调函数不会加入当前的调用栈，而是被放到浏览器的任务队列里排队。当前的同步代码（包括你的other code）会优先执行完毕，只有当调用栈完全清空后，浏览器才会去任务队列里取出定时器的回调来执行。所以不管定时器里的条件满足与否，other code都会先运行。

当前代码的错误点 #

1. 无效的判空逻辑：!localStorageArray这个条件永远不会成立——因为你给localStorage.getItem('myArray')加了|| '[]'的兜底，就算取不到值，JSON.parse('[]')也会返回一个空数组，而空数组在布尔判断里是true，所以这个条件完全多余。
2. 缺少超时控制：没有设置maxWaitTime的超时终止逻辑，会导致定时器无限轮询下去。
3. 未关联目标代码：没有在条件满足时触发other code，也没处理超时后给用户发消息的逻辑。

实现方案 #

下面提供两种可行的实现方式，都能满足“匹配成功执行代码，超时则通知用户”的需求：

方案一：用Promise封装（推荐，更易维护） #

function waitForTargetMatch(targetVal, maxWaitTime = 10000) {
  return new Promise((resolve, reject) => {
    // 启动轮询定时器
    const intervalId = setInterval(() => {
      const localStorageArray = JSON.parse(localStorage.getItem('myArray') || '[]');
      // 检查是否匹配目标值
      if (localStorageArray[0] === targetVal) {
        clearInterval(intervalId);
        resolve(); // 匹配成功，触发后续代码
      }
    }, 1000);

    // 启动超时定时器
    setTimeout(() => {
      clearInterval(intervalId);
      reject(new Error('等待超时，未匹配到目标值')); // 超时后触发错误通知
    }, maxWaitTime);
  });
}

// 使用示例
waitForTargetMatch('你要匹配的值', 15000) // 第二个参数是最大等待时间，单位毫秒
  .then(() => {
    // 这里放原本的other code，只有匹配成功才会执行
    console.log('匹配成功，开始执行目标代码');
    // other code...
  })
  .catch((err) => {
    // 超时或其他异常，通知用户
    alert(err.message);
  });

方案二：无Promise的回调写法（适合简单场景） #

const targetVal = '你要匹配的值';
const maxWaitTime = 10000; // 最大等待时间，比如10秒
let elapsedTime = 0; // 已等待时间

const intervalId = setInterval(() => {
  elapsedTime += 1000;
  const localStorageArray = JSON.parse(localStorage.getItem('myArray') || '[]');

  // 情况1：匹配成功
  if (localStorageArray[0] === targetVal) {
    clearInterval(intervalId);
    // 执行你的other code
    console.log('匹配成功，执行目标代码');
    // other code...
    return;
  }

  // 情况2：超时
  if (elapsedTime >= maxWaitTime) {
    clearInterval(intervalId);
    alert('等待超时，未匹配到目标值');
  }
}, 1000);

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