uni-app 中定时器的使用

学习目标:

学习目标如下所示:

  • uniapp中通过使用uni-app提供的定时器API来实现定时器功能。

学习内容:

内容如下所示:
**uni-app的定时器API分为两种:
1.第一种方式:
setTimeout函数,用于设置一个定时器,在指定时间后执行回调函数;

//示例如下所示:
setTimeout(function() {
									uni.navigateBack();
								}, 2000);
  1. 第二种方式:
    setInterval函数,用于设置一个定时器,在指定时间间隔后重复执行回调函数。
//示例如下所示:
let clearInt = setInterval(()=>{
					this.percent ++;
				},30)
  1. 第一种方式取消定时器:
    clearTimeout(timeoutID)
//示例如下所示:
onLoad() {
	if(this.timer) {  
		clearTimeout(this.timer);  
		this.timer = null;  
	}  
}
  1. 第二种方式取消定时器:
    clearInterval(intervalID)
//示例如下所示:
	if(this.percent === 100){
						clearInterval(clearInt)
					//	that.allInventory()
					}
//示例如下所示:
stopScan() {
			    // 清除定时器
			    clearInterval(this.interval);
			    uni.showToast({
			        title: '关闭扫描成功',
			    })
			},

**


总结:

知识小结:

  • 1、定时器:setTimeout();//n毫秒后执行一次
    setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。
    setTimeout 方法接收两个参数,第一个参数为回调函数函数或字符串,第二个参数为触发时间(单位:毫秒)
  • 2、定时器:setInterval();//每隔n秒执行一次
    setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。

setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

  • 3、清除定时器方法:setTimeout()对应的是 clearTimeout(id);
  • 4、清除定时器方法:setInterval()对应的是 clearInterval(id);
  • 5、尽量不要用setInterval()
  • 原因:
  • (1)setInterval()无视代码错误

setInterval 对自己调用的代码是否报错这件事漠不关心。如果setInterval执行的代码由于某种原因出了错,它还会持续不断地调用该代码。

  • (2)setInterval无视网络延迟

如果每隔一段时间就通过Ajax轮询一次服务器,看看有没有新数据(注意:使用“补偿性轮询”(backoff polling)更好)。单实际使用中会由于某些原因(服务器过载、临时断网、流量剧增、用户带宽受限,等等),请求要花的时间远比你想象的要长。
但 setInterval 仍然会按定时持续不断地触发请求,最终客户端网络队列会塞满Ajax调用。

  • (3)setInterval不保证执行

某些调用会被直接忽略 ,与setTimeout不同,你并不能保证到了时间间隔,代码就准能执行。

  • 6**、settimeout和setinterval区别**

setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式,即setTimeout()只执行一次
setInterval()则可以在每隔指定的毫秒数循环调用函数或表达式,直到clearInterval把它清除。即setInterval()可以执行多次。

  • 7、相同点
    两个函数的参数相同,第一个参数是要执行的code或句柄,第二个是延迟的毫秒数。

  • 8、业务场景的区别、使用场景
    (1)setTimeout用于延迟执行某方法或功能。

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

你可能感兴趣的:(uni-app,前端,javascript)