在使用classList、className动态添加类名时不起作用的问题

1.classList基础用法

var a = document.getElementBy("DIV");
1.使用classList返回所选元素的类名，是一个数组，一个类名占一个长度(a.classList.length)。
2.a.classList.add("classname1") ; 添加一个类名
3.a.classList.remove("classname2") ; 去掉一个类名
4.a.classList.toggle("classname3"); 引号中的类名，有就删除，没有就添加。比较智能的结合了1,2点，用于切换十分方便
5.a.classList.contains("classname4"); 判断一个类型是不是存在，返回true和false

参考文章：classList的用法

2.发现问题：使用classList.toggle修改类名失败，类名闪烁

问题原因：tap事件会触发两次，一次加，一次减
解决方法：使用定时器防抖

//事件监听
mui(document.body).on('tap', '#skill3', function() {
	switchClicked('skill3')
});
// 切换颜色
var switchClickedCD = true
function switchClicked(id) {
	if(switchClickedCD){
		setTimeout(function(){
			var obj = document.getElementById(id);
			obj.classList.toggle("mui-badge-primary")
			console.log(obj.classList.contains('mui-badge-primary'))
			switchClickedCD=true
		},200)
	}
	switchClickedCD=false
}

参考文章：tap事件会触发两次的问题

3.拓展：其他方案

用nmd原生，上vue，用v-show不比这个方便多了？