js轮询

轮询函数资源

    // 轮询
    export const pollingFunction = (func, time , endTime, values, status, immediate = true) => {
      immediate && func(values); //是否立即执行一次，由实际决定
      const startTime = new Date().getTime();
      const pollTimer = setInterval(() => {
        const nowTime = new Date().getTime();
        if ((endTime && nowTime - startTime >= endTime) || status == true ) {
         pollTimer && clearInterval(pollTimer);
        }
        func(values);
      }, time);
      return pollTimer;
    };

实际使用

    import { useDispatch } from 'umi';
    import { Form, Input, Button, message } from 'antd';
    import styles from './index.less';

    const Login = () => {
      const dispatch = useDispatch();
      message.config({
        top: 50,
      });


      let pollTimer;  // 声明定时器

      const sendLogin = (values) => {
        dispatch({
          type: 'common/login',
          payload: {...values},
        }).then((res) => {
          if(res?.code == 200 ){
            message.success('同步数据成功!')
            clearInterval(pollTimer) // 清除定时器
          }
          if (res?.code == 201){
            message.success('同步数据失败!')
          }
          if (res?.code == 202){
            message.success('正在同步数据...')
          }
        })
      }
      const submit = (values) => {
        // 点击按钮调轮询方法
        pollingFunction(sendLogin, 6000, 500000, values )
      };

      // func--轮询的目标函数 time--多久轮询一次 endTime--轮询的总时长 values--目标函数需要的参数
      const pollingFunction = (func, time , endTime, values, immediate = true) => {
        immediate && func(values); //是否立即执行一次
        const startTime = new Date().getTime();
          pollTimer = setInterval(() => {
          const nowTime = new Date().getTime();
          if (endTime && nowTime - startTime >= endTime) {
            pollTimer && clearInterval(pollTimer);
          }
          func(values)
        }, time);
        return pollTimer;
      };

      return (
        <div className={styles.loginWrap}>
          <Form name="basic" onFinish={submit}>
            <Form.Item>
              <p className={styles.title}>项目工时填报系统</p>
            </Form.Item>
            <Form.Item
              name="username"
              rules={[{ required: true, message: '请输入用户名' }]}
              label="工号"
              className={styles.jobNum}
            >
              <Input style={{ marginBottom: '28px' }} placeholder="请输入用户名" />
            </Form.Item>
            <Form.Item
              name="password"
              rules={[{ required: true, message: '请输入密码' }]}

              label="密码"
            >
              <Input.Password placeholder="请输入密码" />
            </Form.Item>
            <Form.Item>
              <Button className={styles.submitBtn} type="primary" htmlType="submit">
                登录
              </Button>
            </Form.Item>
          </Form>
        </div>
      );
    };

    export default Login;

总结

封装的定时器没有外部引入，因为定时器在封装函数内部声明，测试时无法在外部手动清除定时器，实际项目中没有选择引入