首页 > 关于setTimeout

关于setTimeout

有一个按钮,按了之后会显示另外一个元素,然后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);
};

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

【热门文章】
【热门文章】