微信小程序,页面有个限时抢购,每个商品都有一个倒计时,实现的方法是有个setTimeOut每秒递减一次时间,具体代码如下:
问题:使用循环,假设有5个商品,每秒要setData五次,感觉这样写很不科学,应该不利于性能。所以,请教一下各位大哥有什么优化建议。
data: {
//限时抢购内容
dataRushToBuy: [{
imageUrl: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1591554165031&di=4929aa3cfa3ccf4758ad19be6255a6ab&imgtype=0&src=http%3A%2F%2Fimg3.99114.com%2Fgroup1%2FM00%2FF2%2F49%2FwKgGTFkUuLmAWgneAAMEPU7tIGM054.jpg',
grade: 'A级',
title: '现捞鲜活生蚝',
subTitle: '新鲜正宗乳山大生蚝',
tag: ['积分双倍', '不可用卷'],
number: 8,
price: '33.3',
originalPrice: '66.9',
endTime: '2020-07-28 03:00:11',
countDown: [{
day: '22',
hou: '23',
min: '24',
sec: '25'
}]
}, {
imageUrl: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1591554550828&di=2e9273fc79630404ccafc6abc5b28c67&imgtype=0&src=http%3A%2F%2F8481538.s21i-8.faiusr.com%2F2%2Fabuiabacgaag1-_8uwuo8m6dwjcobdjtaw.jpg',
grade: 'A级',
title: '上海青500g-800g',
subTitle: '细腻爽滑,营养丰富,来自大自然的馈赠',
tag: ['店长推荐'],
number: 20,
price: '3.3',
originalPrice: '8.9',
endTime: '2020-06-22 03:00:12',
countDown: [{
day: '22',
hou: '23',
min: '24',
sec: '25'
}]
}, {
imageUrl: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2840192109,2046781298&fm=26&gp=0.jpg',
grade: 'B级',
title: '越南进口龙利鱼柳无骨无刺巴沙鱼鱼片',
subTitle: '细腻爽滑,营养丰富,来自大自然的馈赠',
tag: ['积分双倍', '店长推荐'],
number: 19,
price: '63.3',
originalPrice: '68.9',
endTime: '2020-05-28 03:00:13',
countDown: [{
day: '22',
hou: '23',
min: '24',
sec: '25'
}]
}, {
imageUrl: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1591630473933&di=7b12ab2422b79209d4d277628cd08f4d&imgtype=0&src=http%3A%2F%2Fm1.biz.itc.cn%2Fpic%2Fnew%2Fn%2F96%2F47%2FImg5864796_n.jpg',
grade: 'A级',
title: '神户牛肉',
subTitle: '细腻爽滑,营养丰富,来自大自然的馈赠',
tag: ['积分双倍'],
number: 19,
price: '363.3',
originalPrice: '368.9',
endTime: '2020-06-14 03:00:14',
countDown: [{
day: '22',
hou: '23',
min: '24',
sec: '25'
}]
}, {
imageUrl: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2102551933,267546245&fm=26&gp=0.jpg',
grade: 'A级',
title: '鲜活澳洲深水大龙虾500g-800g',
subTitle: '细腻爽滑,营养丰富,来自大自然的馈赠',
tag: ['店长推荐'],
number: 20,
price: '263.3',
originalPrice: '268.9',
endTime: '2020-06-16 03:00:15',
countDown: [{
day: '22',
hou: '23',
min: '24',
sec: '25'
}]
}]
}
//倒计时函数
funCountDown: function () {
//获得数组
let arrList = this.data.dataRushToBuy;
//获得当前时间
let nowTime = new Date().getTime();
//循环数组递减时间
for (var i = 0, len = arrList.length; i < len; i++) {
//将结束时间转换为时间戳
let vEndTime = new Date(arrList[i].endTime).getTime();
//声明一个空数组
let arrCountDown = []
//如果结束时间-现在时间大于0则递减时间
if (vEndTime - nowTime > 0) {
let time = (vEndTime - nowTime) / 1000;
// 获取天、时、分、秒
let day = parseInt(time / (60 * 60 * 24));
let hou = parseInt(time % (60 * 60 * 24) / 3600);
let min = parseInt(time % (60 * 60 * 24) % 3600 / 60);
let sec = parseInt(time % (60 * 60 * 24) % 3600 % 60);
//写入数组
arrCountDown = [{
day: day,
hou: hou,
min: min,
sec: sec
}]
//如果结束时间-现在时间不大于0则全部写入为00
} else {
arrCountDown = [{
day: '00',
hou: '00',
min: '00',
sec: '00'
}]
}
//渲染写入处理后的时间
this.setData({
['dataRushToBuy[' + i + '].countDown']: arrCountDown
})
}
//每秒重复一次
setTimeout(this.funCountDown, 1000);
},
//页面加载函数
onLoad() {
this.funCountDown();
}
你的代码里把
this.setData({ ['dataRushToBuy[' + i + '].countDown']: arrCountDown })
这段放到for 循环外面,在for循环里计算好一个data,每个循环往 data 里放一个数据,data都可以直接用你现在的形式
data['dataRushToBuy[' + i + '].countDown'] = arrCountDown
然后在外面调用this.setData(data),就可以只调用一次setData
改变数据结构,商品放在一个key里,js中每秒循环处理后只要执行一次setData不就可以