关于setTimeout

Question

有一个按钮，按了之后会显示另外一个元素，然后setTimeout来自动隐藏这个元素。隐藏的时候用到动画所以setTimeout来设置display:none。这个时候如果在元素还没隐藏的时候再点按钮让元素显示就会出bug。
应该怎么来写才对？

Answer 1

你说的是这样？

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);
};

Answer 2

在逻辑里面加一层关于隐藏元素正在隐藏的判断，如果在它正在隐藏的过程中再次点击了，应该retrun出去。

Answer 3

设置隐藏的时候点击无效即可

Answer 4

执行前清除一次定时器或者采用one来一次性绑定可以解决。
不过能不用定时器尽量不用，你所说的效果css就能写出来，何必用定时器。
过渡属性transition中有一个delay来控制延迟变化，你只需改变一个class控制样式，具体请翻w3c。