uniapp中使用计时器setInterval的场景与方法

 更新时间:2022年08月25日 15:59:04   作者:M _chen  
计时器在日常开发中经常会遇到,下面这篇文章主要给大家介绍了关于uniapp中使用计时器setInterval的场景与方法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下

首先要区分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()这个页面生命周期才能及时清除

补充:uni-app 倒计时计时器

<text class="red">剩余时间:<text>{{remaining}}</text></text>
export default {
		data() {
			return {
				remaining: '', //显示剩余时间
				remainingd: ''  //数据返回时间秒
			}
		},
		onLoad() {
			uni.showLoading(); //数据加载中
			this.getmsglist();//第一次加载数据
		},
		methods: {
			//获取列表信息
			getmsglist: function() {
					var _self = this;
				_self.goodsid = uni.getStorageSync('goodsid');
				uni.request({
					url: _self._apiurl + "/app/goods/getgoodsdetail",
					method: 'POST',
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					data: {
						openid: _self.openid,
						token: _self.token,
					},
					success: (res) => {
						console.log(res);
						var data = res.data;
						_self.remainingd = data.data.timestamp;
						_self.jishiqi();//执行一次倒计时,因为进入页面有等待
						
						setInterval(function() {
							_self.jishiqi();
						}, 1000)
 
						uni.hideLoading(); //关闭加载
 
 
					}
				})
			},
			//倒计时计时器
			jishiqi: function() {
				var dj = this.remainingd;
				if (dj <= 0) {
					this.remaining = "已过期";
				} else {
					var ddf = this.djs(dj); //格式化过后的时间
					this.remaining = ddf;
					//当前时间减去时间
					dj = dj - 1;
					this.remainingd = dj;
				}
 
			},
			//得到的秒换算成时分秒
			djs: function(ms) { 
				var h = parseInt(ms / (60 * 60));
				var m = parseInt((ms % (60 * 60)) / 60);
				var s = (ms % (60 * 60)) % 60;
				return h + ":" + m + ":" + s;
			},
		}
	}

总结

到此这篇关于uniapp中使用计时器setInterval的文章就介绍到这了,更多相关uniapp使用计时器setInterval内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 小程序实现上下切换位置

    小程序实现上下切换位置

    这篇文章主要为大家详细介绍了小程序实现上下切换位置,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-11-11
  • 微信小程序可滑动月日历组件使用详解

    微信小程序可滑动月日历组件使用详解

    这篇文章主要为大家详细介绍了微信小程序可滑动月日历组件的使用方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-10-10
  • 基于JavaScript制作一个简单的天气应用

    基于JavaScript制作一个简单的天气应用

    随着Web开发技术的不断发展,JavaScript已经成为前端开发中不可或缺的一部分,下面我们就来看看如何使用JavaScript实现一个简单的天气应用吧
    2024-01-01
  • 脚本写的IE右键助手

    脚本写的IE右键助手

    脚本写的IE右键助手...
    2006-07-07
  • H5页面跳转小程序的3种实现方式

    H5页面跳转小程序的3种实现方式

    这篇文章主要给大家介绍了关于H5页面跳转小程序的3种实现方式,说出来你可能不信,每位商家几乎都会h5转跳到小程序、H5转跳至小程序的应用范围十分广阔,需要的朋友可以参考下
    2023-08-08
  • Navigator sendBeacon页面关闭也能发送请求方法示例

    Navigator sendBeacon页面关闭也能发送请求方法示例

    这篇文章主要为大家介绍了Navigator sendBeacon页面关闭也能发送请求的方法示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-06-06
  • 一文带你深入了解JavaScript中的原型&原型链

    一文带你深入了解JavaScript中的原型&原型链

    相信不少同学在面试的时候经常在基础上就挂掉了,当下行情实属严峻,如果我们基础都没有打牢固的话,实属有点面试浪费机会。本文就来和大家聊聊JavaScript中的原型&原型链,希望对大家有所帮助
    2023-02-02
  • IE6弹出“已终止操作”的解决办法

    IE6弹出“已终止操作”的解决办法

    导致这个问题产生的原因,一般是因为js(一个比较复杂的js)写在body里面,在body元素加载完之前调用出现问题。显然,解决该问题的方法就是将这一段js放在body元素解析完毕之后。
    2010-11-11
  • 微信小程序使用uni-app开发小程序及部分功能实现详解

    微信小程序使用uni-app开发小程序及部分功能实现详解

    uni-app是一个使用Vue.js 开发所有前端应用的框架,下面这篇文章主要给大家介绍了关于微信小程序使用uni-app开发小程序及部分功能实现的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-08-08
  • javascript实现在线客服效果

    javascript实现在线客服效果

    这篇文章主要介绍了javascript实现在线客服效果的实例代码,非常不错,这里推荐给大家,有需要的小伙伴可以参考下。
    2015-07-07

最新评论