首先要区分setInterval和setTimeout

使用场景:

1.一般情况下 setTimeout() 用于延迟执行某方法或功能;

2.setInterval() 则一般用于刷新表单,对于一些表单的假实时指定时间刷新同步。

定义:

1.setInterval() : 用于按照指定的周期(以毫秒计)来循环调用函数或计算表达式,直到 clearInterval() 被调用或窗口关闭

2.setTimeout(): 用于在指定毫秒数后再调用函数或者计算表达式(以毫秒为单位)

区别总结:

setTimeout() 方法只运行一次,也就是说当达到设定的时间后就开始运行指定的代码,运行完后就结束了,次数是一次。

setInterval() 是循环执行的,即每达到指定的时间间隔就执行相应的函数或者表达式,只要窗口不关闭或 clearInterval() 调用就会无限循环下去。

缺点总结:

setInterval缺点:

1.使用setInterval时,某些间隔会被跳过;即使setInterval调用的方法报错了,他仍然会继续执行。

2.无视网络延迟,可能多个定时器会连续执行

setTimeout缺点:
1.不能按时执行

2.执行动画时它通过设定间隔时间来不断改变图像位置,达到动画效果。但是容易出现卡顿、抖动的现象,原因是: settimeout 任务被放入异步队列,只有当主线程任务执行完后才会执行队列中的任务。

uniapp上使用:

//uniapp中的具体用法:我这里使用到了setInterval
data() {
		return {
			timer: null//定时器名称
		};
	},
//一般在页面需要的地方使用,这里我是放在了onshow()里
onShow() {
	// console.log('onshow');
	 this.timer = setInterval(function() {
		// 放入你自己的业务逻辑代码
 	}, 3000);
},
//uniapp中onHide()能监听到页面离开
onHide() {//离开页面前清除计时器
	// console.log('onHide');
	clearInterval(this.timer);
	this.timer = null;
},

这里我要说明一下,在uniapp 中要实现vue离开页面销毁定时器功能,百度了一大圈都说使用vue的beforeDestroy生命周期,如下:

//beforeDestroy为实例销毁之前调用
beforeDestroy() {
		if(this.timer) {
    	clearInterval(this.timer); //关闭
  	} 

结果,根本就没有用,依然关不掉,最后看到一个方法说是:通过$once这个事件侦听器器在定义完定时器之后的位置来清除定时器,如下:

const timer = setInterval(() =>{ // 某些定时器操作   }, 500);            

// 通过$once来监听定时器,在beforeDestroy钩子可以被清除。 
uni.$once('beforeDestroy', () => {                     
        clearInterval(timer);                                     
})

显然,对我这里并没有用,最后还是采用了 onHide()这个页面生命周期才能及时清除

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐