Warum werden meine Warnmeldung und Hintergrundfarbe nicht gleichzeitig ausgeführt?

Ich versuche, beide meine letzte Warnmeldung "Herzlichen Glückwunsch ..." und die HTML-Hintergrundfarbe Änderung gleichzeitig geschehen zu bekommen. Die Farbänderung passiert nach Ich klicke auf den "OK" -Button der bereits angezeigten Warnmeldung. Wo gehe ich falsch?Warum werden meine Warnmeldung und Hintergrundfarbe nicht gleichzeitig ausgeführt?

Zugegeben, es gibt eine ähnliche Frage, obwohl ich keine Hinweise von den vorgeschlagenen Lösungen erhalten habe.

let myColors = ["red", "purple", "blue", 
 
    "orange", "violet", "green", 
 
    "amber", "olive", "navy", 
 
    "maroon", "lime", "yellow", "chartreuse", 
 
    "crimson", "wheat", "deeppink", 
 
    "gold", "beige", "turquoise" 
 
]; 
 

 
let yourColor = (prompt("I am thinking of one of these colors:\n\n" + (myColors.sort()).join(", ") + "\n\nWhat color am I thinking of?")).toLowerCase(); 
 

 
function yourGuessedColor() { 
 
    while (myColors.indexOf(yourColor) <= -1) { 
 
    alert("Sorry, I don't recognize your color.\n\nPlease try again."); 
 
    yourColor = (prompt("I am thinking of one of these colors:\n\n" + (myColors.sort()).join(", ") + "\n\nWhat color am I thinking of?")).toLowerCase(); 
 
    } 
 
    return yourColor; 
 
} 
 

 
let guessedColor = yourGuessedColor(); 
 
let guesses = 1; 
 

 
function colorGame() { 
 
    let myFavColor = myColors[Math.floor(Math.random() * myColors.length)]; 
 
    while (guessedColor != myFavColor) { 
 
    if (guessedColor > myFavColor) { 
 
     alert("Sorry, your guess is not correct!\n\nHint: your color is alphabetically higher than mine.\n\nPlease try again."); 
 
     guessedColor = (prompt("I am thinking of one of these colors:\n\n" + (myColors.sort()).join(", ") + "\n\nWhat color am I thinking of?")).toLowerCase(); 
 
    } else { 
 
     alert("Sorry, your guess is not correct!\n\nHint: your color is alphabetically lower than mine.\n\nPlease try again."); 
 
     guessedColor = (prompt("I am thinking of one of these colors:\n\n" + (myColors.sort()).join(", ") + "\n\nWhat color am I thinking of?")).toLowerCase(); 
 
    } 
 
    guesses++; 
 
    document.body.style.backgroundColor = myFavColor; 
 
    } 
 
    return alert("Congratulations! You have guessed the color!\n\nIt took you " + guesses + " guesses to finish the game.\n\nYou can see the color in the background."); 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta charset="UTF-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
    <title>Color Guessing Game</title> 
 
</head> 
 

 
<body onload="colorGame()"> 
 
    <script type="text/javascript"> 
 
    </script> 
 
</body> 
 

 
</html>

Quelle

2017-01-31 Collins Orlando

Da JavaScript single-threaded ist, und die 'alert()' pausiert die Ausführung bis nach dem es abgewiesen wird. Wenn Sie stattdessen einen modalen Dialog verwenden (im Dokument anstelle von "alert()"), kann die Farbänderung auftreten, sobald der Dialog angezeigt wird. –

Beachten Sie, dass das OP die Hintergrundfarbe vor der Warnung setzt: 'document.body.style.backgroundColor = myFavColor;' kommt vor 'return alert (" Congratulations! ... 'im Code. –

[tag: web-worker] : Verwenden Sie ['WebWorker'] (https://developer.mozilla.org/en/Using_web_workers), um Multi-Threads zu verwalten –

Es gibt eigentlich zwei Dinge hier los. Wie in den Kommentaren erwähnt, ist Javascript single-threaded und eine Warnmeldung wartet auf Ihren Klick, bevor die nächste Anweisung ausgeführt wird. In Ihrem Fall wäre eine Möglichkeit, einfach die Farbe vor dem Anzeigen der Alarmbox zu ändern:

   //CHANGE THE COLOR BEFORE ALERTING 
       document.body.style.backgroundColor = guessedColor; 
       return alert("Congratulations! You have guessed the color!\n\nIt took you " + guesses + " guesses to finish the game.\n\nYou can see the color in the background.");

Aber da ist noch etwas anderes los. Es sieht so aus, als wenn Sie den Befehl zum Ändern der Hintergrundfarbe zuerst abfeuern, wird die Alarmbox ausgelöst vor der Befehl (um die Farbe zu ändern) beendet. Eine Warnmeldung stoppt den Thread im Browser, der auch die Farbwechselanweisung enthalten muss. Ich bin mir nicht sicher, ob das ein Bug ist oder nicht. Und ich habe es nur in Chrome ausprobiert, daher bin ich mir bei anderen Browsern nicht sicher.

Eine Möglichkeit, dieses Problem umgehen können, ist Ihre Alert-Box auf einem verzögerten Timer zu setzen, wie folgt aus:

document.body.style.backgroundColor = guessedColor; 
    var alertMsg = "Congratulations! You have guessed the color!\n\nIt took you " + guesses + " guesses to finish the game.\n\nYou can see the color in the background."; 
    setTimeout(function(){alert(alertMsg)},100);

Hier ist ein funktionierendes Beispiel: https://jsfiddle.net/Lzcht5dz/1/

Quelle

2017-01-31 16:49:34

Ich habe das schon probiert, aber ohne Erfolg. Die HTML-Hintergrundfarbe wird weiterhin ausgeführt, nachdem das Warnfeld nicht mehr angezeigt wird. –

Ich sehe jetzt, wovon du sprichst. Ich habe das vorher nicht gesehen. Es muss eine Art von Anomalie geben, bei der die Alarmbox AUSGEHT, bevor die Farbänderung abgeschlossen ist. Ich bin mir nicht ganz sicher, warum das passiert. Sie können jedoch umgehen, indem Sie die Alarmbox leicht verzögern. Schau dir meine aktualisierte Antwort an. –

Es ist ein sehr bizarre Bug. Ich habe es auf 3 Zeilen Code reduziert und kann es jedes Mal replizieren: http://codepen.io/anon/pen/wgypPW Ihre Antwort ist richtig, wie Sie das Problem beheben können. Es gibt eine andere Frage, die dieser ähnelt, wobei das Update das festgelegte Zeitlimit ist. Ich frage mich, warum das in JS passiert ??? – calcazar

Die nächste Zeile Ihres Javascript, bis nicht ausgeführt werden, nachdem der Alarm-Box entlassen wurde. Anstelle von alert() können Sie console.log() verwenden, das die Ausführung nicht pausiert.

EDIT: Meine schlechte, Sie wollen den Benutzer es zu sehen. Als Kommentator unten wird einfach die Hintergrundfarbe geändert, bevor der Alarm angezeigt wird().

Quelle

2017-01-31 16:44:21 callmebeewee

Er muss Ausgabe an den Benutzer geben, obwohl. – Feathercrown

Had bereits versuchte das aber ohne Erfolg. –

alert() stoppt das Skript bis zur Freigabe. Versuchen alert() mit display() ersetzen und definieren display() als:

function display(a){ 
    document.getElementById("display").innerHTML = a; 
}

Stellen Sie sicher, ein Element in Ihrem HTML haben, mit der ID display.

Quelle

2017-01-31 16:49:36 Feathercrown

Warum werden meine Warnmeldung und Hintergrundfarbe nicht gleichzeitig ausgeführt?

Antwort

Verwandte Themen