如何在定时轮询支付状态的函数中实现仅执行一次的GA上报逻辑

方案1：后端配合实现幂等（最稳妥，彻底解决存储被清除的问题） #

• 后端在交易表新增ga_reported布尔字段，默认值为false
• 前端GA上报成功后，立即调用接口把当前交易ID对应的ga_reported更新为true
• 调整check函数的判断逻辑，只有当result.status === 'done'且result.ga_reported === false时，才执行GA上报代码
  该方案完全不依赖前端本地存储，即使用户清空本地缓存、更换设备，也不会出现重复上报的情况。

方案2：前端侧多维度兜底（无需后端配合，可覆盖全部统计场景） #

如果暂时无法调整后端接口，用三层校验做兜底：

1. 优先利用GA原生去重能力：上报交易时必须把唯一的paymentId作为transaction_id参数传给GA，GA后台会自动过滤同一个transaction_id的重复上报数据，就算前端多次触发上报，后台统计也不会出现重复交易记录
2. 本地双存储标记：上报成功后，同时把paymentId存入localStorage和sessionStorage的已上报交易列表中，每次check到状态为done时，先校验当前paymentId是否存在于两个存储的已上报列表里，不存在才执行上报
3. 内存变量锁：页面加载时初始化一个reportedPaymentIds的Set对象，已上报的ID同时存入这个Set，校验时同时检查Set里是否存在，避免页面生命周期内的重复上报

调整后的代码示例 #

// 页面初始化时加载已上报列表
const reportedIds = new Set([
  ...JSON.parse(localStorage.getItem('reportedPaymentIds') || '[]'),
  ...JSON.parse(sessionStorage.getItem('reportedPaymentIds') || '[]')
])

async check() {
  this.globalLoader = true
  const result = await finalizePayment({
    id: this.id ?? undefined,
    paymentId: this.paymentId ?? undefined,
    token: localStorage.getItem('token'),
  })
  this.globalLoader = false

  if (result.status === 'done' && !reportedIds.has(this.paymentId)) {
    // 执行GA上报逻辑，必须传入transaction_id为this.paymentId
    gtag('event', 'purchase', {
      "transaction_id": this.paymentId,
      // 其余交易参数
    })

    // 上报成功后更新存储和内存标记
    reportedIds.add(this.paymentId)
    const storedIds = JSON.parse(localStorage.getItem('reportedPaymentIds') || '[]')
    storedIds.push(this.paymentId)
    const uniqueIds = [...new Set(storedIds)]
    localStorage.setItem('reportedPaymentIds', JSON.stringify(uniqueIds))
    sessionStorage.setItem('reportedPaymentIds', JSON.stringify(uniqueIds))
  }
}

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