React项目中能否实现间隔指定时长（如2周）后触发指定函数？

原有代码问题 #

首先你写的判断逻辑if (date === date + 14)本身恒为假，同一个变量不可能等于自身加14，完全无法触发判断。
其次纯前端定时器天然依赖页面进程生命周期，页面刷新、关闭、浏览器进程回收都会销毁定时器，单纯靠内存中的定时器不可能实现跨会话的长周期定时触发。

可行方案分两种场景实现 #

场景1：仅用户打开页面时触发即可，不需要离线执行 #

适合本地功能提醒、本地状态更新这类对触发时机要求不高，允许用户打开页面后再执行的需求，用本地持久化存储实现：

• 首次初始化或者上次执行完目标函数后，将下次触发时间戳存入localStorage等本地持久化存储
• 页面每次初始化时读取存储的下次触发时间，和当前时间比对
• 如果当前时间大于等于存储的触发时间，立即执行目标函数，执行完成后更新存储的下次触发时间为当前时间加指定间隔
• 可以搭配短轮询定时器，避免用户长时间不刷新页面错过触发时机

React+dayjs示例代码：

import { useEffect } from 'react'
import dayjs from 'dayjs'

const TIMER_KEY = 'two_week_task_next_trigger_time'

const TwoWeekTask = () => {
  const targetFunction = () => {
    // 你要执行的业务逻辑
    console.log('两周间隔任务触发')
    // 执行完更新下次触发时间
    localStorage.setItem(TIMER_KEY, String(dayjs().add(14, 'day').valueOf()))
  }

  useEffect(() => {
    // 页面初始化先校验时间
    const nextTriggerTime = Number(localStorage.getItem(TIMER_KEY))
    // 首次运行没有存储值的话先初始化下次触发时间
    if (!nextTriggerTime) {
      localStorage.setItem(TIMER_KEY, String(dayjs().add(14, 'day').valueOf()))
      return
    }
    if (dayjs().valueOf() >= nextTriggerTime) {
      targetFunction()
    }

    // 页面存活期间每10分钟轮询校验一次，可根据需求调整间隔
    const interval = setInterval(() => {
      const currentNextTime = Number(localStorage.getItem(TIMER_KEY))
      if (dayjs().valueOf() >= currentNextTime) {
        targetFunction()
      }
    }, 10 * 60 * 1000)

    // 清除定时器避免内存泄漏
    return () => clearInterval(interval)
  }, [])

  return <></>
}

场景2：要求到点必须触发，即使用户没打开页面 #

这类需求纯前端无法实现，必须把定时逻辑放到后端：

• 前端提交定时任务参数（触发时间、关联用户、触发条件等）到后端接口
• 后端用定时任务框架（比如Node生态的node-schedule、Java生态的Quartz、Go生态的cron库）持久化存储定时任务，到点执行对应业务逻辑
• 需要通知用户的场景，后端可以通过推送、短信、邮件等方式触达，或者在用户下次打开页面时推送未读通知

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