setTimeout与.delay()的区别

之前认为setTimeout与.delay()的用法一样只是延时执行一些方法,后来用的时候发现其实是有区别的
我应用的场景是点击某一按钮时显示一个toast条,两秒后自动消失;如果两秒内再次点击按钮关闭当前toast条,重新显示toast条。
<div class="top-tip">
   <div class="alert alert-danger" id="nobody_tip" role="alert" style="display: none;" name='tip'>
      <span>没有符合要求的用户,请重新筛选</span>
   </div>
</div>

<div class="top-tip">
   <div class="alert alert-danger" id="nobody_tip" role="alert" style="display: none;" name='tip'>
      <span>没有符合要求的用户,请重新筛选</span>
   </div>
</div>


点击按钮后执行的js代码
function show_nobody_tip() {
        $("#nobody_tip").fadeOut(0);
        $("#nobody_tip").fadeIn(100);
        setTimeout(function () {
            $("#nobody_tip").fadeOut(1000)
        }, 2000)
    }


用setTimeout方法是按预想的执行,但是用$("#nobody_tip").delay(2000).fadeOut(1000)就会出现再次点击按钮时当前toast条不会先关闭的问题,为什么会出现这样的问题呢,是因为调用.delay()后fadeOut(1000)已经排在队列中,delay执行前再次操作这个元素时还是会先执行.delay()后的fadeOut(1000),而不会执行fadeOut(0)。

猜你喜欢

转载自dachuan212.iteye.com/blog/2128896
今日推荐