预订应用：页面关闭后未支付预约无法自动删除问题排查

核心问题：前端定时器不可靠 #

你猜的没错，问题就出在依赖前端window.setInterval的逻辑上。前端页面一旦关闭、刷新或进入后台，浏览器会暂停/清除所有定时器，自然没法触发deleteReservation接口，MongoDB里的记录就会残留。而且这种前端触发删除的方式本身就不安全——用户可以通过禁用JS、修改前端代码轻松绕过，数据一致性完全没保障。

现有代码的其他隐患 #

1. 字符串匹配判断超时：用timeOut === '0:01'来触发删除太脆弱，比如格式变成00:01或者计算时出现偏差，就会失效
2. 倒计时计算错误：你代码里new Date(time).getTime() + 9000是加9秒？和需求的30分钟不符，应该加30*60*1000（1800000毫秒）

正确的解决方案：后端兜底+前端辅助 #

方案1：MongoDB TTL索引（最推荐）

直接给预订集合的createdAt字段设置TTL索引，让MongoDB自动删除超过30分钟的未支付订单，完全不需要前端或后端额外写定时逻辑：

// 后端MongoDB模型定义示例
const reservationSchema = new mongoose.Schema({
  // 其他字段...
  status: { type: String, enum: ['unPaid', 'paid'], default: 'unPaid' },
  createdAt: { type: Date, default: Date.now }
});

// 仅对未支付订单设置TTL：30分钟后自动删除
reservationSchema.index(
  { createdAt: 1 },
  { expireAfterSeconds: 30*60, partialFilterExpression: { status: 'unPaid' } }
);

方案2：后端定时任务

如果需要在删除时执行额外逻辑（比如通知用户），可以用定时任务库（比如node-schedule）定期扫描未支付订单：

const schedule = require('node-schedule');

// 每分钟扫描一次（可根据需求调整频率）
schedule.scheduleJob('* * * * *', async () => {
  const thirtyMinutesAgo = new Date(Date.now() - 30*60*1000);
  // 删除超过30分钟且未支付的订单
  await Reservation.deleteMany({
    status: 'unPaid',
    createdAt: { $lt: thirtyMinutesAgo }
  });
});

前端代码优化（仅做展示，不负责删除）

前端只需要正确展示倒计时，删除逻辑交给后端：

const [timeLeft, setTimeLeft] = useState('');

useEffect(() => {
  if (status !== 'unPaid') return;

  const timer = setInterval(() => {
    const deadline = new Date(createdAt).getTime() + 30*60*1000;
    const now = Date.now();
    const diff = deadline - now;

    if (diff <= 0) {
      setTimeLeft('已超时');
      // 这里仅刷新页面数据，删除逻辑由后端处理
      getDetails();
      clearInterval(timer);
      return;
    }

    const min = Math.floor((diff % (1000*60*60)) / (1000*60));
    const sec = Math.floor((diff % (1000*60)) / 1000);
    setTimeLeft(`${min.toString().padStart(2, '0')}:${sec.toString().padStart(2, '0')}`);
  }, 1000);

  return () => clearInterval(timer);
}, [createdAt, status]);

// 移除原来靠timeOut判断删除的逻辑

总结 #

永远不要依赖前端来保证数据的一致性和准确性，前端只负责交互和展示，核心的业务逻辑（比如逾期删除）必须放在后端或者数据库层面实现，这样无论前端状态如何，数据都能保持正确。

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