有一个按钮,按了之后会显示另外一个元素,然后setTimeout来自动隐藏这个元素。隐藏的时候用到动画所以setTimeout来设置display:none。这个时候如果在元素还没隐藏的时候再点按钮让元素显示就会出bug。
应该怎么来写才对?
在逻辑里面加一层关于隐藏元素正在隐藏的判断,如果在它正在隐藏的过程中再次点击了,应该retrun
出去。
执行前清除一次定时器或者采用one来一次性绑定可以解决。
不过能不用定时器尽量不用,你所说的效果css就能写出来,何必用定时器。
过渡属性transition中有一个delay来控制延迟变化,你只需改变一个class控制样式,具体请翻w3c。
你说的是这样?
html
<div id="show" style="display:none;">哦</div>
<button id="btn">点我啊</button>
js
var timeoutHandler = null;
document.getElementById('btn').onclick = function(){
var show = document.getElementById('show');
if(timeoutHandler){
clearTimeout(timeoutHandler);
}
show.style.display = 'block';
timeoutHandler = setTimeout(function(){
show.style.display = 'none';
},5000);
};
设置隐藏的时候点击无效即可