Javascript setTimeout失误

Question

我试图在事件中显示div。当用户点击添加到购物车时，屏幕顶部会显示一个小div，表示任务已成功完成。

这是我的代码

function display(){
  var target = document.getElementById('atc');
  var start = -35;
  target.style.top = $j(document).scrollTop() + 'px';
  var topVal = parseInt(target.style.top);
  var top = 0;
  var id = setInterval(show,0.5);
  function show(){
    if(top == 20)
    {
      clearInterval(id);

      setTimeout(function(){
        jQuery('#atc').fadeOut().delay(2000);
        jQuery('#atc').css("top",start).show()
      },1000);
    }
    else
    {
        top = top + 2;
        target.style.top = (topVal + top) + 'px';

    }
  }
}

.signifier
{
  position:absolute;
  top:-35px;
  left:50%;
  transform: translateX(-50%);
  z-index: 1000;
  background-color:#3e3e3e;
  padding:0.5em;
  color:white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="add-to-cart" onclick = "display()">Add to cart</button>
<div class="signifier>
    <p>successfully completed</p>
</div>

虽然如果按下按钮一次可以正常工作，但如果反复按下该按钮，则该部门会停止显示或显示出一些差异

Answer 1

试试这个：

  

<强>错误

     

    

    

1. atc不是jquery函数。

    

2. #add-to-cart没有ID名称尝试使用全名ID fadeIn

    
3. 对setTimeout（）
使用function display(){ var target = document.getElementById('add-to-cart'); var start = -35; target.style.top = $(document).scrollTop() + 'px'; var topVal = parseInt(target.style.top); var top = 0; var id = setInterval(show,0.5); function show(){ if(top == 20) { clearInterval(id); setTimeout(function(){ jQuery('#add-to-cart').fadeOut().delay(2000); jQuery('#add-to-cart').css("top",start).fadeIn() },1000); } else { top = top + 2; target.style.top = (topVal + top) + 'px'; } } }效果        

.signifier
{
  position:absolute;
  top:-35px;
  left:50%;
  transform: translateX(-50%);
  z-index: 1000;
  background-color:#3e3e3e;
  padding:0.5em;
  color:white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="add-to-cart" onclick = "display()">Add to cart</button>
<div class="signifier">
    <p>successfully completed</p>
</div>

.vCenterItems {
    display: flex;
    align-items: center;
}

Answer 2

setTimeout(function(){
        jQuery('#atc').fadeOut().delay(2000);
        jQuery('#atc').css("top",start).show()
      },1000);

此超时未被重置或清除。延迟和css更改没有链接，因此css change + show不受延迟影响...

你应该考虑完全不使用setTimeout和setInterval来使用jQuery.animate。

Answer 3

可能对您有所帮助https://jsfiddle.net/wxdtw2sx/

<script>
$('#atc').hide();

$('#add-to-cart').click(function(){
$('#atc').show();
$('#atc').hide(3000);  
});
</script>