8951b21b1c722b347417356b0d90e3e1.png

由于项目中难免会碰到需要实时刷新,无论是获取短信码,还是在支付完成后轮询获取当前最新支付状态,这时就需要用到定时器。

但是,定时器如果不及时合理地清除,会造成业务逻辑混乱甚至应用卡死的情况,这个时就需要清除定时器。

某个页面中启动定时器后,一定要在页面关闭时将定时器清除掉。即在页面卸载(关闭)的生命周期函数里,清除定时器。

<template>
	<view>
		<button @click="getStatus">{{ buttonText }}</button>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				timer: null, //首先我在data函数里面进行定义定时器名称:
				buttonText : '轮询获取订单支付状态',
				timerNum: 60 // 设置定时器时间
			}
		},
		methods: {
			getStatus() {
				this.loading(); // 启动定时器
				this.timer = setInterval(() => {  //创建定时器
					if (this.timerNum === 0) { // 设置的定时器时间为0后执行的操作
						this.timer && this.clearTimer(); // 关闭定时器
						window.open('码灵导航 - 程序员网址导航', '_blank'); // 在新窗口打开程序员网址导航
					} else {
						this.loading();
					}
				}, 1000);
			},
			loading() { // 启动定时器
				this.timerNum -= 1; // 定时器减1
				this.text = '获取中(' + this.timerNum + ')';
			},
			clearTimer() {//清除定时器
				clearInterval(this.timer);
				this.timer = null;
			}
		},
		// 最后在beforeDestroy()生命周期内清除定时器:
		beforeDestroy() {
		    clearInterval(this.timer);        
		    this.timer = null;
		}
	}
</script>

小编推荐:码灵导航 - 程序员网址导航nav.imaring.com

码灵 程序员导航,作为一名码农,随着平时工作的需要,慢慢收集了国内外很多优秀 站,这其中包括前端开发、后端开发、UI设计、在线工具、在线运行、免费接口、在线资源、在线学习、技术论坛、技术博客等等,满足一般 程序员日常需求,是一款值得收藏的 程序员。
Logo

前往低代码交流专区

更多推荐