解决Vue/小程序中针对数组（列表）实现倒计时倒数效果越来越快的问题

原创于 2018-05-02 18:39:47 发布 · 2.8k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#倒计时 #vue #watch #小程序 #wepy

前端开发进阶同时被 2 个专栏收录

33 篇文章

订阅专栏

经验

21 篇文章

订阅专栏

本文探讨了Vue.js中使用watch监听list时出现的倒计时速度逐渐加快的问题，并提供了一种有效的解决方案。通过修改倒计时逻辑，避免了因多次触发watch而导致的错误，确保了倒计时功能的正确运行。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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