TS前端封装轮询方法

最新推荐文章于 2024-08-07 16:55:16 发布

MaydayYao

最新推荐文章于 2024-08-07 16:55:16 发布

阅读量89

点赞数 2

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/weixin_45629552/article/details/140690887

版权

一级标题

export const createPolling = (interval: number, fn = noop) => {
  let timerId: number | undefined;
  let n = 0;
  let execId = ""; // 每次开启polling时生成，记录当前的轮询，用来防止多次调用start方法后创建多个轮询
  let exeFn: AnyFunction | undefined = fn;

  return {
    duration: 0,
    get isRunning() {
      return !!execId;
    },
    stopped(id: string) {
      return id !== execId;
    },
    _run() {
      const st = Date.now();
      this.duration = st - n;
      const runId = execId;

      const exec = (t: number) => {
        timerId = window.setTimeout(() => {
          if (this.stopped(runId)) {
            return;
          }
          this._run();
        }, t);
      };

      const ret: any = exeFn?.();
      if (ret && ret.then && isFunction(ret.then)) {
        ret.then(() => {
          const timeDiff = Date.now() - st;
          const intervalRemain = Math.max(0, interval - timeDiff);
          if (this.stopped(runId)) {
            return;
          }
          exec(intervalRemain);
        });
      } else {
        exec(interval);
      }
    },
    immediateRun() {
      exeFn?.();
    },
    start(sfn?: (...p: any[]) => void) {
      n = Date.now();
      this.duration = 0;
      execId = uniqueId("__FE_POLLING_EXEC_ID__");
      clearTimeout(timerId);
      if (sfn) {
        exeFn = sfn;
      }
      this._run();
    },
    stop() {
      execId = "";
      if (timerId !== undefined) {
        clearTimeout(timerId);
        timerId = undefined;
      }
    },
    destroy() {
      exeFn = undefined;
      this.stop();
    },
  };
};

使用

import { createPolling } from '@/utils/utils';



const poll = createPolling(5000, () => { getCurrentData() });
//开始轮询
poll.start();

//销毁
onBeforeUnmount(() => {
    poll.stop();
})