解決Vue/小程式中 針對陣列(列表) 實現倒計時 倒數效果越來越快的問題
阿新 • • 發佈:2018-12-27
你可能會使用watch監聽list
由於watch監聽資料變化,對資料進行遍歷時,當只有一個item符合條件時倒計時正常,一旦多個item符合條件,if語句內執行了一次以上,由於多個item發生改變會多次觸發watch,導致倒計時越來越快,
錯誤效果
watch={
List(val){
//var timer = setInterval(()=>{
var timer = setTimeout(()=>{
val.forEach((item)=>{
if (item.button_mark===0 && item.count_down>0){
item.count_down--;
this.$apply()
}
})
timer = null;
},1000)
}
}
解決辦法
正確效果
1.新增method countDown作用於list
countDown(List){
setInterval(()=>{
for (var index in list)
{
if(list[index].button_mark===0 && list[index].count_down>0){
list[index].count_down--;
}
}
this.$apply()
},1000)
}
this.countDown(List);