vue项目：开启定时器后，1分钟内每5秒调一次接口，请求到数据后，清除定时器

龙仔CLL

已于 2022-09-29 16:33:09 修改

阅读量4k

点赞数 1

文章标签： vue.js javascript 前端

于 2022-09-29 14:46:37 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_42304966/article/details/127106399

版权

这篇博客探讨了前端开发中如何使用定时器进行数据请求管理。`_codeCount`函数用于启动定时器，当`codeTime`剩余时间为0时，清除定时器并停止请求。`_clearCount`则直接清理定时器，确保资源有效释放。内容着重于前端应用中的数据请求超时处理和性能优化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

   data() {
		return {
			codeTimer: null,//定时器
			codeTime: 12, // 限制1分钟后没请求到erp数据，不再继续请求
			
		};
	},
//开启定时器  通过codeTime的值来判断是否需要定时器
    _codeCount() {
		this.codeTimer = window.setInterval(() => {
			if (this.codeTime <= 0) {
				console.log('清楚定时器');
				//通过window来清除定时器
				window.clearInterval(this.codeTimer);
				this.codeTimer = null;
				this.codeTime = 0;
				/* 清除定时的逻辑*/
			} else {
			    /*未请求到接口，继续请求数据*/
				//this.getErpTableDataList();
				this.codeTime--;
			}
			console.log(this.codeTime, 'this.codeTime');
		}, 5000);
	},
	//清除定时器
	_clearCount() {
		window.clearInterval(this.codeTimer);
		this.codeTimer = null;
		this.codeTime = 0;
	},