JSコードの実行順序のロジックは何ですか？ ボタンをクリックして背景が赤くなり、その後メッセージが表示されることを期待しています。ただし、OK - >CodePenをクリックすると、メッセージが最初に表示され、背景に色が適用されます。 適切なものは何ですか& OKをクリックする前に、背景を赤にする正しい方法はありますか？JS - なぜそのようなコード実行順序ですか？ （初心者レベル）
function run(){
document.body.style.backgroundColor = 'red';
alert('Contratulations!');
}<html>
<head></head>
<body>
<button onclick="run()">Click me!</button>
</body>
</html>コードは期待どおりの順序で実行されますが、WebBrowserによって提供される機能を呼び出すため、これらのステートメントは同期していません。
ブラウザで実行されたJavascriptはUIスレッドでは発生しません。したがって、DOM（JavaScriptのブラウザHTMLとの対話を可能にする抽象化）を変更すると、javascriptの実行とは別のUI（ブラウザページ）の更新がトリガーされます。基礎となるDOM要素は更新されますが、実際のUIは瞬時に更新されません。
コードでは、DOM要素を変更した後、コードがすぐにブラウザにアラートを表示させます。アラートを表示するのはブラウザ固有の動作で、Chromeの場合はUIの更新を一時停止し、続行する前にアラートと対話する必要があります。 Firefoxでは、UIが更新された後に警告が表示されます。
2つのブラウザ間の動作は、ブラウザレンダリングエンジンとイベントループの実装方法が異なるだけです。
function run(){
document.body.style.backgroundColor = 'red';
setTimeout(function() {
alert('Contratulations!');
},0);
}<html>
<head></head>
<body>
<button onclick="run()">Click me!</button>
</body>
</html>この答えは、JavaScriptのイベントループの最後にalert表示を追加しているsetTimeoutを呼び出すことにより、Why is setTimeout(fn, 0) sometimes useful?
をあなたは問題を解決することができますどのように少しより多くの情報を持っていますこれにより、UIに更新するのに十分な時間が与えられます。
これを試してみてください。遅延の後に関数を呼び出すsetTimeout
function run(){
document.body.style.backgroundColor = 'red';
setTimeout(function() {
alert('Contratulations!');
}, 0);
}<html>
<head></head>
<body>
<button onclick="run()">Click me!</button>
</body>
</html>。この場合、遅延はゼロです。アラートを作成する前にバックグラウンドを変更できますが、目に見える遅延は発生しません。
これは、OPのコードで、アラートボックスを閉じた後でのみ背景が変更される理由を説明していません。 –
これはalert()コールがモーダルダイアログへの呼び出しであることに起因しています。モーダルダイアログは、ダイアログが閉じられるまでUIが他のことをするのをブロックするダイアログです。これは、JavaScriptランタイムが次のステートメントに移行する前に、ブラウザが色を表示するのに十分速く表示されないという問題です。 alert()が実際にはwindowオブジェクトのメソッドであることを認識することが重要です。あなたはwindow.alert()と書くことができました。これを知っていれば、windowオブジェクトはJavaScript言語のネイティブな部分ではないことを理解する必要があります。 windowはブラウザオブジェクトであり、JavaScriptランタイムではなくブラウザによって管理されます。
メッセージをアラートではなくコンソールに表示するようにコードを修正しました。コンソールへの書き込みは非UIブロックであるため、色の変化がすぐにわかります。
function run(){
document.body.style.backgroundColor = 'red';
console.log('Contratulations!');
}<html>
<head></head>
<body>
<button onclick="run()">Click me!</button>
</body>
</html>
あなたはどのようなブラウザを使用していますか？それはあなたがFirefoxで期待するように動作します。 – mseifert
@mseifert、Chromeを使用しています。 – oboer