Javascript setTimeout Fehlzündungen

Question

Ich versuche, ein div auf ein Ereignis anzuzeigen. Wenn ein Benutzer auf Hinzufügen zum Einkaufswagen klickt, sollte oben auf dem Bildschirm ein kleines div angezeigt werden, das besagt, dass die Aufgabe erfolgreich abgeschlossen wurde.

hier ist mein Code

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>

obwohl es funktioniert gut, wenn die Taste einmal gedrückt wird, aber wenn Sie die Taste die Aufteilung stoppt zeigt nach oben oder zeigt wiederholt gedrückt wird dann mit einigen oben

discrepency

Answer 1

Try this:

Fehler

1. $j ist nicht Jquery Funktion.

2. atc nicht id name versuchen, mit vollständigen Namen id #add-to-cart

3. Verwendung fadeIn Wirkung für 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); 

Dieses Zeitlimit wird nicht zurückgesetzt oder gelöscht. Die Verzögerung und CSS-Änderung ist nicht verkettet, so dass die CSS-Änderung + Show nicht von der Verzögerung betroffen ist ...

Sie sollten wirklich jQuery.animate vollständig ohne setTimeout und setInterval verwenden.

Answer 3

Könnte dies hilfreich sein für Sie https://jsfiddle.net/wxdtw2sx/

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

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