在做小程序的时候,做到了一个限时商品售卖,用到了倒计时,因为这个原因导致了安卓手机上使用小程序时,将小程序放入后台运行一段时间后,再次进入小程序后出现了页面白屏或者点击事件失效的情况,这里记录下
1.相关代码文件
我这里是使用了自定义组件的形式来渲染的
/* limitcommodity是一个数组,返回的是商品对象,包含商品价格、商品结束时间、商品图片等 */ <block wx:for="{{limitcommodity}}" wx:key="{{item.id}}"> <commodityitem class="specialcontent" goods="{{item}}" /> </block>
component({ properties: { goods: object }, data: { }, timer: null, /* 在组件实例进入页面节点树时执行,开始定时器 */ attached: function() { if(this.timer) { clearinterval(this.timer); } this.filtertime(); let that = this; this.timer = setinterval(function () { that.filtertime(); }, 1000) }, /* 在组件实例被从页面节点树移除时执行,将定时器清除 */ detached: function() { clearinterval(this.timer); this.timer = null; }, methods: { /* 用于将时间戳转换成自定义的时间格式 */ filtertime() { let totaltime = new date(parseint(this.data.goods.endtime) * 1000) - new date(); let days = parseint(totaltime / 1000 / 60 / 60 / 24, 10); let hours = parseint(totaltime / 1000 / 60 / 60 % 24, 10); let minutes = parseint(totaltime / 1000 / 60 % 60, 10); let seconds = parseint(totaltime / 1000 % 60, 10); let day = days >= 10 ? days : '0' + days; day = day == 0 ? '' : day + '天'; let hour = hours >= 10 ? hours : '0' + hours; let minute = minutes >= 10 ? minutes : '0' + minutes; let second = seconds >= 10 ? seconds : '0' + seconds; this.setdata({ limittime: day + hour + ":" + minute + ":" + second }) }, } })
2.引起的原因
3.改进方法
改进方法就是减少setdata操作
component({ properties: { limitcommodity:array }, data: { }, timeout:null, /* 在组件实例进入页面节点树时执行 */ attached(){ this.calculate(); }, /* 在组件实例被从页面节点树移除时执行,将定时器清除 */ detached(){ cleartimeout(this.timeout); this.timeout = null; }, methods: { filtertime(endtime) { let totaltime = new date(parseint(endtime) * 1000) - new date(); let days = parseint(totaltime / 1000 / 60 / 60 / 24, 10); let hours = parseint(totaltime / 1000 / 60 / 60 % 24, 10); let minutes = parseint(totaltime / 1000 / 60 % 60, 10); let seconds = parseint(totaltime / 1000 % 60, 10); let day = days >= 10 ? days : '0' + days; day = day == 0 ? '' : day + '天'; let hour = hours >= 10 ? hours : '0' + hours; let minute = minutes >= 10 ? minutes : '0' + minutes; let second = seconds >= 10 ? seconds : '0' + seconds; return day + hour + ":" + minute + ":" + second }, calculate(){ let limitcommodity = this.data.limitcommodity; for (let i = 0; i < limitcommodity.length;i++){ limitcommodity[i]['endtime_date'] = this.filtertime(limitcommodity[i]['endtime']) } this.setdata({ limitcommodity }) this.timeout = settimeout(()=>{ this.calculate(); },1000); } } })
改进就是计算时间后再返回时间,而setdata的是整个商品列表数组,这样就减少了setdata次数
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对移动技术网的支持。如果你想了解更多相关内容请查看下面相关链接
如对本文有疑问, 点击进行留言回复!!
LongClick原理、上下文菜单原理、EditText长按弹窗原理、WebView长按弹窗自定义、修复WebView全选重复bug ———————————————— 版权声明:本文为CSDN博主「
JobScheduler 实现 特定时间,特定条件(系统空闲,电池电量,磁盘空间 ……)下执行任务
温习Android基础知识——《第一行代码(第三版)》读书笔记 Chapter 10 Service
网友评论