Wie kann ich eine JS-Funktion warten lassen, um auszuführen?

Question

Ich bin ziemlich neu in der Programmierung und wollte ein Clicker-Spiel mit JS und HTML machen. Jetzt möchte ich Erfolge hinzufügen. Sie sollten auftauchen und für ein paar (5 vielleicht?) Sekunden angezeigt werden und dann verschwinden.

Ich habe eine Lösung bisher, aber die Funktion wird alle 10sec ausgeführt. und wenn du den Erfolg nach dem 6. bekommen solltest. Zweitens wird das Pop-up für etwa 2 - 4 Sekunden angezeigt, bevor es verschwindet.

Kurz gesagt, wenn die Leistung erreicht ist, sollte die Leistung (div) Pop-up, bleiben Sie dort für 5 Sekunden, dann verblassen.

Hier ist meine JS:

//Check if achievement #1 is completed/true: 
if(Ach1up == true){ 
    Modal1stAch.style.display = "block"; 
    Ach1up = null; 
} 

//Fade-out function 
setTimeout(function() { 
    Modal1stAch.style.opacity = "0.0"; 
    Modal1stAch.style.WebkitTransition = "2s";  
    Modal1stAch.style.transition = "2s"; 
}, 10000); 

Answer 1

Wenn ich richtig verstanden, was Sie brauchen, ist Ihr fadeout Code in eine Funktion zu packen und es 5s rufen nach dem ach1up wahr ist.

//Check if achievement #1 is completed/true: 
if(Ach1up == true){ 
    Modal1stAch.style.display = "block"; 
    Ach1up = null; 
    setTimeout(function() { //wait 5 seconds to fade the popup 
     popupFadeOut(); 
    }, 5000); 
} 

//Fade-out function 
// you write it, and wait to be called. 
function popupFadeOut() { 
    Modal1stAch.style.opacity = "0.0"; 
    Modal1stAch.style.WebkitTransition = "2s";  
    Modal1stAch.style.transition = "2s"; 
}