1. 程式人生 > >解決Vue/小程式中 針對陣列(列表) 實現倒計時 倒數效果越來越快的問題

解決Vue/小程式中 針對陣列(列表) 實現倒計時 倒數效果越來越快的問題

你可能會使用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);