Fertigstellen eines Funktionsaufrufs sicherstellen, bevor ein anderer gestartet wird

terbaik

terbaik

New member
Hi Leute,
Ich habe folgendes Problem:
Ich habe folgenden Code geschrieben:

HTML: 
<HTML>
  <head>
    <script src="jquery.js"></script>
    <style>
      #toolbar{
        position: fixed;
        left:0;
        top:0;
        width: 100%;
        background: black;
        opacity: 0.8;
        padding: 5px;
        min-height: 23px;
      }
      #infobox{
        font-family: arial;
        font-size: 10pt;
        border-radius: 5px;
        padding-left: 5px;
        padding-right: 5px;
        background: orange;
        opacity: 0;
        width: 300px;
        min-height: 10px;
        //visibility: hidden;
      }
    </style>
    <script>
      function showMessage(type, text){
        var origtext = text;
        if(text.length > 30){
          text = text.substr(0,26);
          text += "...";
        }
        var imgpath = "./img/icons/toolbar/infobox/";
        var t = "NOTIFICATION";
        if(type=="ERROR"){
          t="ERROR";
        }else if(type=="HELP"){
          t="HELP";
        }

        if(t=="NOTIFICATION"){
          document.getElementById("infobox").style.background = "orange";
          document.getElementById("infobox").innerHTML = "<img src=\""+imgpath+"notification.png\">";
        }else if(t=="ERROR"){
          document.getElementById("infobox").style.background = "red";
          document.getElementById("infobox").innerHTML = "<img src=\""+imgpath+"error.png\">";
        }else if(t=="HELP"){
          document.getElementById("infobox").style.background = "lightblue";
          document.getElementById("infobox").innerHTML = "<img src=\""+imgpath+"help.png\">";
        }
        document.getElementById("infobox").style.height = "23px";
        document.getElementById("infobox").style.width = "15px";
        $('#infobox').animate({
          opacity: 0.6,
        }, 500, function() {
          $('#infobox').delay(100).animate({
            width: '300px',
          }, 500, function(){
            document.getElementById('infobox').innerHTML+=text;
            $('#infobox').delay(5000).animate({
              opacity: 0.6,
            }, 1000, function(){
              var content = infobox.innerHTML;
              var newContent = content.substr(0,content.length-text.length);
              document.getElementById('infobox').innerHTML=newContent;
              $('#infobox').animate({
                width: '15px',
              }, 500, function(){
                $('#infobox').delay(100).animate({
                  opacity: 0,
                }, 500);
              });
            });
          });
        });
      }
    </script>
  </head>
  <body>
    <div id="toolbar">
      <div id="infobox"><img src="./img/icons/toolbar/infobox/notification.png"></div>
    </div>
    <script>
      showMessage("NOTIFICATION", "Erfolgreich eingeloggt");
    </script>
  </body>
</HTML>

Das funktioniert auch perfekt.
Nur wenn ich die Funktion zweimal direkt hintereinander aufrufe, dann kommt das ganze script natürlich durcheinander, weil der vorherige Funktionsaufruf noch nicht fertig ist. Wie kann ich sicherstellen, dass ein zweiter Funktionsaufruf erst dann ausgeführt wird, wenn der erste fertig ist?

Danke schonmal für eure Zeit und Hilfe!

terbaik
 

Anhänge

  • infobox.zip
    35,9 KB · Aufrufe: 0
Was meinst du genau mit "wenn der erste fertig ist"? JS hat immer nur einen Thread - deswegen wird die zweite Funtion definitiv erst dann ausgeführt, wenn die erste fertig ist... oder meinst du die Animationen?
 
Ja, kkapsner, ich meine die Animationen, die ich mit JQuery gemacht habe... Die kommen dann durcheinander, wie kann ich das verhindern? Ich hab mich auch schon gewundert, warum der eine Funktionsaufruf nicht komplett ausgeführt wird(oder die Animationen), bevor der nächste startet, weil ich nämlich weis, dass Javascript kein Multithreading unterstützt.

Dann neue Frage: Wie kann ich sicherstellen, dass die Animationen erst beendet werden(vollständig)?
 
In JS arbeitet man bei so einen Problem mit Callbacks - diese verwendest du auch schon in deiner Animationskaskade - da kannst du am Ende einfach noch einen anfügen und dort dann deine zweite Nachricht anzeigen lassen.
 
Zuletzt bearbeitet:
1 Problem gelöst: Ich kann jetzt 2 Meldungen hintereinander mit einem Funktionsaufruf erscheinen lassen.

Aber: Wenn ich jetzt diese Funktion zweimal hintereinander aufrufe, z.b auf einen Buttonklick lege und diesen zweimal anklicke, dann besteht dieses Problem ja weiterhin(natürlich). Wie kann ich es beheben?
 
Problem dann: Ich plane, das in eineganze Site einzubauen, auf der viele Links sind, die diese Animation auslösen...
 
Du könntest mit einer Queue arbeiten. Soll heißten: du hast irgendwo einen Flag, der dir anzeigt, ob gerade eine Animation läuft. Wenn bei einem erneuten Funktionsaufruf jetzt schon eine Animation läuft, speicherst du die "Anfrage" in einer Queue (technisch ein Array) ab. Wenn eine Animation zu Ende ist, schaust du, ob sich etwas in deiner Queue befindet. Wenn ja startest du die erste Animation in der Queue und verkürzst deine Queue entsprechend.
 
Ok, danke, kkapsner, das ist echt eine super Idee!
Ich hab schon an eine art warteschlange gedacht, aber auf ein array, das wie eine queue arbeitet, bin ich noch nicht gekommen.

Ich werds ausprobieren, und wenns klappt, poste ich den Lösungscode
 
Zuletzt bearbeitet:
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben