# 定时器

# setTimeout(callback, delay, rest)

设定一个定时器。在定时到期以后执行注册的回调函数

参数说明

参数 类型 必填 说明
callback Function 回调函数
delay Number 延迟的时间,函数的调用会在该延迟之后发生,单位 ms
rest Any param1, param2, ..., paramN 等附加参数,它们会作为参数传递给回调函数

返回值

返回值 类型 说明
timeoutID Number 定时器的编号,这个值可以传递给 clearTimeout 来取消该定时

# clearTimeout(timeoutID)

取消由 setTimeout 设置的定时器。

参数说明

参数 类型 必填 说明
timeoutID Number 要取消的定时器的 ID

# 最佳实践

定时器应当在组件、页面销毁时候取消,否则该定时器将成为游离定时器,无法被回收销毁。

<script lang="ts">
	let timer: ReturnType<typeof setTimeout> | null = null;
	export default {
		data() {
			return {};
		},
		methods: {
			onSetTimeout() {
				timer = setTimeout(() => {
					console.log("setTimeout");
				}, 1000);
			},
			clearTimer() {
				// clearTime
				if (timer) {
					clearTimeout(timer);
					timer = null;
				}
			},
		},
		beforeUnmount() {
			// clearTime
			this.clearTimer();
		},
	};
</script>

# setInterval(callback, delay, rest)

设定一个定时器。按照指定的周期(以毫秒计)来执行注册的回调函数

参数说明

参数 类型 必填 说明
callback Function 回调函数
delay Number 执行回调函数之间的时间间隔,单位 ms
rest Any param1, param2, ..., paramN 等附加参数,它们会作为参数传递给回调函数

返回值

返回值 类型 说明
intervalID Number 定时器的编号,这个值可以传递给 clearInterval 来取消该定时

代码示例

this.timer = setInterval(() => {
	//TODO
}, 1000);

# clearInterval(intervalID)

取消由 setInterval 设置的定时器。

参数说明

参数 类型 必填 说明
intervalID Number 要取消的定时器的 ID

# 最佳实践

<script lang="ts">
	let timer: ReturnType<typeof setTimeout> | null = null;
	export default {
		data() {
			return {};
		},
		methods: {
			onSetTimeout() {
				timer = setInterval(() => {
					console.log("setInterval");
				}, 1000);
			},
			clearTimer() {
				// clearTime
				if (timer) {
					clearInterval(timer);
					timer = null;
				}
			},
		},
		beforeUnmount() {
			// clearTime
			this.clearTimer();
		},
	};
</script>

# 注意事项

  • App 端返回的定时器编号可能为 String 类型,使用时无需主动转换为 Number 类型
  • 定时器执行间隔并不等于定时器间隔,受很多因素影响,这属于 JS 执行问题,详见 MDN 文档