When making mini programs, I made a limited-time product sale and used the countdown. Because of this reason, when using mini programs on Android phones, when using mini programs, the mini program is put into the background and run for a period of time, and after entering the mini program again, the page white screen or the click event is invalid. Here is a record
1. Related code files
I'm using custom components to render
- External reference to custom component wxml file
/* limitCommodity is an array, which returns a product object, including product price, product end time, product picture, etc. */
<block wx:for="{{limitCommodity}}" wx:key="{{}}">
<commodityItem class="specialContent" goods="{{item}}" />
</block>
- Custom component js file
Component({
properties: {
goods: Object
},
data: {
},
timer: null,
/* Execute when the component instance enters the page node tree, start the timer */
attached: function() {
if() {
clearInterval();
}
();
let that = this;
= setInterval(function () {
();
}, 1000)
},
/* Execute when the component instance is removed from the page node tree, clear the timer */
detached: function() {
clearInterval();
= null;
},
methods: {
/* Used to convert timestamps into custom time formats */
filterTime() {
let totalTime = new Date(parseInt() * 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 + 'sky';
let hour = hours >= 10 ? hours : '0' + hours;
let minute = minutes >= 10 ? minutes : '0' + minutes;
let second = seconds >= 10 ? seconds : '0' + seconds;
({
limitTime: day + hour + ":" + minute + ":" + second
})
},
}
})
2. Causes
- Because when introducing a custom component externally, the timer is called and the setData operation is performed, which leads to the increase of timers when referring to this component externally, if the length of the incoming product array is large, the number of timers increases, and the setData operation continues to increase.
- If too much setData will cause more memory usage
3. Improvement method
The improvement method is to reduce the setData operation
- You can customize another component to pass the entire array into
- Then calculate the time in the product array first
- Improved js file
Component({
properties: {
limitCommodity:Array
},
data: {
},
timeOut:null,
/* Execute when the component instance enters the page node tree */
attached(){
();
},
/* Execute when the component instance is removed from the page node tree, clear the timer */
detached(){
clearTimeout();
= 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 + 'sky';
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 = ;
for (let i = 0; i < ;i++){
limitCommodity[i]['endtime_date'] = (limitCommodity[i]['endtime'])
}
({
limitCommodity
})
= setTimeout(()=>{
();
},1000);
}
}
})
Improvement is to calculate the time and then return the time, and setData is the entire product list array, which reduces the number of setData times.
Summarize
The above is the entire content of this article. I hope that the content of this article has certain reference value for your study or work. Thank you for your support. If you want to know more about it, please see the relevant links below