有两种情况:
一、单个定时器,比如发送验证码后,显示倒计时60秒
二、在循环中创建多个定时器,比如美团未支付页面有多个订单,都是从下单时间开始倒计时15分钟
第二个情况有点复杂,弄了很久,算是踩坑了。
一、单个定时器,比如发送验证码后,显示倒计时60秒
html
<div class="input-item">
<span class="des">验证码</span>
<input class="input" placeholder="填写验证码" id="validateCode" />
<a href="javascript:void(0)" v-on:click="GetverificationCode">{{count}}</a>
</div>
js
data: {
count: "获取验证码",
timer: null,//关键
},
methods:{
//获取验证码
GetverificationCode: function (e) {
let that = this;
$.ajax({
url: "/OrderMeal/SendVerificateCode",
data: {
phone: $("#phone").val()
},
success: function (data) {
if (data.isSuccess == false) {
$.toptip('系统繁忙,请稍后再试', 'warning');
return;
}
const TIME_COUNT = 60;//设置60秒
if (!that.timer) {
that.count = TIME_COUNT;
that.show = false;
that.timer = setInterval(() => {
if (that.count > 0 && that.count <= TIME_COUNT) {
that.count--;
} else {
clearInterval(that.timer);
that.timer = null;
that.count = "重新获取";
}
}, 1000)
}
}
})
},
},
二、在循环中创建多个定时器,比如美团未支付页面有多个订单,都是从下单时间开始倒计时15分钟
for (var i = 0; i < that.orderList.length; i++) {
let j = i;//重点
(function (j) {//重点,跟循环打印一个道理,否则得到的的是最后一个,而不是每一个值都有
that.orderList[j].timer = null;//重点
var startTime = new Date().getTime();
var endTime = Date.parse(that.orderList[j].orderTime);//下单时间换算成毫秒
endTime += 1800000//加30分钟(倒计时三十分钟)
var leftTime = endTime - startTime;//下单后的30分钟-现在的时间
if (!that.orderList[j].timer) {
that.orderList[j].timer = setInterval(() => {
if (leftTime > 0) {
leftTime = leftTime - 1000
var m = Math.floor(leftTime / 1000 / 60 % 60);
var s = Math.floor(leftTime / 1000 % 60);
that.$set(that.orderList[j], "Min", m)//上一篇有讲,给数组对象加新属性
that.$set(that.orderList[j], "Sec", s)
//console.log(that.orderList[j].Min, s)
} else {
clearInterval(that.orderList[j].timer);
that.orderList[j].timer = null;
}
}, 1000)
}
})(j)
}