Javascript setTimeout失火

Question

我想在事件中顯示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>

但如果按下按鈕，一旦它工作正常，但如果按鈕被反覆按下然後分工停止顯示出來或者用一些顯示出來discrepency

Answer 1

試試這個：

個錯誤

1. $j不是jQuery函數。

2. atc不是ID名稱試着用（）號的全名#add-to-cart

3. 使用fadeIn爲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>

Answer 2

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

此超時未被重置或清除。延遲和CSS變化沒有鏈接，所以CSS變化+顯示不受延遲...

你應該真的考慮完全使用jQuery.animate，而不使用setTimeout和setInterval。

Answer 3

可能是這個有幫助你https://jsfiddle.net/wxdtw2sx/

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

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