js轮询之setInterval踩坑小记

写在开头

最近负责的项目要接入计费功能，有了计费自然需要充值。说起充值，无外乎支付宝、微信和网银了，然后前端调用充值接口后，需要起一个轮询任务，去监听支付状态，根据轮询结果来进行下一步的操作（当然了，有条件的大户人家想要直接上websocket也没问题）。所以，业务场景倒是很easy，梳理完逻辑我就吭哧吭哧开搞了…

发现问题

然而，当我基本写完在调试时，发现每次轮询停止了，页面上的状态会刷新两次。当时的业务是需要我在支付状态时显示验证码过期的倒计时，然而倒计时结束后会重新计时一次，这里的场景可以不关心，直观的表现就是轮询清除后状态更新了两次，而且是偶现！

import { useRef, useState } from 'react';

export const useRechargeResult = () => {
  const intervalRef = useRef(void 0);
  const [rechargeStatus, setRechargeStatus] = useState(0);

  const getRechargeStatus = async (sequence: string) => {
    await axios.post('/bill/recharge/status', {
        sequence
      })
      .then(res => {
       setRechargeStatus(res?.data?.status || 0);
       
        // 1.充值中 2.充值成功 3.充值失败 4.充值过期
        if (res?.data?.status !== 1) {
          clearPolling();
        }
      });
  };

  const startPolling = (sequence: string) => {
    intervalRef.current = setInterval(() => {
      getRechargeStatus(sequence);
    }, 1000);
  };

  const clearPolling = () => {
    clearInterval(intervalRef.current);
    intervalRef.current = void 0;
  };

  return {
    rechargeStatus,
    setRechargeStatus,
    startPolling,
    clearPolling
  };
};

bug原因

代码如上，思考了良久，我觉得是js执行机制哪里我疏忽了，还有为什么是偶现呢？于是乎，经过debuger后，我发现了问题所在。

假如getRechargeStatus 函数没有then回调，clearInterval(timerId)可以很轻松的清除定时任务，不会让它进入js执行栈中执行。

如果这样写const { data } = await getRechargeStatus() 或者await getRechargeStatus().then(res => {})，而且js现在处于setTimeout的回调函数已经执行并且在await状态中，那么js清除了setInterval的回调函数的执行（此时最后一次setTimeout的回调函数已经执行），但是却没有清除await getRechargeStatus()的回调函数，还在苦苦等待…。所以，最后一次轮询的异步回调（即then中的代码）会继续执行，导致了轮询停止后，页面状态又更新了一遍。

请求的时间越长，这个状态（setTimeout的回调函数已经执行并且在await 状态中）出现的概率越高。这就是为什么，偶现。

所以，我在回调中处理了一下，如果轮询不存在的话，就不执行，问题解决了，手动狗头。

  const getRechargeStatus = async (sequence: string) => {
    await httpBillClient
      .post('/bill/recharge/detail', {
        sequence
      })
      .then(res => {
        // 清除定时器时，并不能清除异步请求的回调，所以这里要限制一下
        if (intervalRef.current) {
          setRechargeStatus(res?.data?.status || 0);
        }

        // 1.充值中 2.充值成功 3.充值失败 4.充值过期
        if (res?.data?.status !== 1) {
          clearPolling();
        }
      });
  };

参考链接：https://blog.csdn.net/weixin_34309543/article/details/88838560