Vue定时器及原理与TS封装

Vue定时刷新请求数据及原理

定时器核心的两个方法：

1. setInterval()

• setInterval（）是一个实现定时调用的函数，可按照指定的周期（以毫秒计）来调用函数或计算表达式。
• setInterval方法会不停地调用函数，直到 clearInterval被调用或窗口被关闭。
• setInterval方法每次调用setInterval函数都会产生一个唯一的ID

2. clearInterval（）

• clearInterval() 方法可取消由 setInterval() 设置的 timeout。
• clearInterval() 方法的参数必须是由 setInterval() 返回的 ID 值。

以下为示例代码：

  private intervalId: number | undefined = undefined;
  created() {
    this.tableList();
    //第一次clearInterval,作为保险避免可能存在的intervalId对后面造成影响
    clearInterval(this.intervalId);
    //设置setInterval()每5000ms调用一次tableList()，刷新数据
    this.intervalId = setInterval(() => {
      this.tableList();
    }, 5000);
  }
  // 定时器销毁，在离开页面后，页面进行跳转
  destroyed() {
    clearInterval(this.intervalId);
  }
  async tableList() {
  	//从接口请求数据
    const res = await apiTest(接口所需参数);
    if (res.status === 200) {
    	//从接口获取数据
		const listData = res.data；
    }
  }

TS封装

下面为TS封装后的定时器，可供多组件使用

//定义空记录，用于存放参数信息
const timerObj: Record<string, number> = {};
//定义TimerID
export enum TimerID {
  timerId1 = "TimerId1", 
  timerId2 = "TimerId2"
}

//创建定时器，默认3秒刷新一次
export function createScheduled(
  timerId: string,
  callback: Function,
  delay: number = 3000
) {
  clearInterval(timerObj[timerId]);
  //setInterval()具有返回值，存放在记录里
  timerObj[timerId] = setInterval(() => {
    callback && callback();
  }, delay);
}

// 清除指定定时器
export function clearScheduled(timerId: string) {
  clearInterval(timerObj[timerId]);
}

// 清除所有定时器
export function clearAllScheduled() {
  Object.keys(timerObj).forEach((key) => {
    clearInterval(timerObj[key]);
  });
}

在组件中的使用方式，并假设List()为一个请求接口数据的方法，两秒进行一次刷新

<script lang="ts">

import {
  TimerID,
  createScheduled,
  clearScheduled,
} from "......公用组件path.......";

@Component
export default class 类名 extends Vue{
  created() {
    this.List();
    createScheduled(TimerID.timerId1, () => {
      this.List()，2000
    });
  }

  // 定时器销毁
  destroyed() {
    clearScheduled(TimerID.timerId1);
  }
}
</script>