uniapp使用计时器setInterval
M _chen 人气:14首先要区分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;
},
}
}总结
加载全部内容