変数がtrueのときにJavaScriptがDOMステートメントを最後に実行するのはなぜですか？

Question

今日は1トンのバグを解決していますが、この1つのバグはうまくいかない。

以下のコードは、非常に単純なログオンページです。この時点で唯一正しいユーザー名は「admin」で、そのユーザーの正しいパスワードは「password」です。ここで

はコードです：その後、ポップアップ表示2つの警告ボックス（成功）および（x）は、ポップ：何らかの理由

function loginauth() { 
    var success = false; 
    var Xusername = document.getElementById("lsr1u").value; 
    var Xpassword = document.getElementById("lsr1p").value; 
    if (Xusername == "admin") { 
    if (Xpassword == "password") { 
     success = true; 
    } else { 
     document.getElementById("wrong").innerHTML = "The username or password is incorrect." 
    } 
    } else { 
    document.getElementById("wrong").innerHTML = "The username or password is incorrect." 
    } 
    if (success) { 
    if (success) { 
     document.getElementById("wrong").innerHTML = ("s"); 
    } 
    // successful login operations here 
    alert("success"); 
    //document.getElementById("author").innerHTML = "success"; //remove when done 
    alert("x"); 
    } 
} 

、コードが実行されるの最後のチャンクが、このキャッチ付きの前に document.getElementByIdは、idが "wrong"の段落のinnerHTMLを "s"に変更します。

このコードには何も問題はありません。 DOMが最初に変更されることを確認するために、if/elseステートメントを二重に入れました。しかし、それはうまくいかなかった。

「このユーザー名またはパスワードが間違っています」というこのページの2つのdocument.getElementByIdsは、（falseの場合はvar successと仮定されているので）完全に正常に機能します。そして、私の成功で/ elseブロックを最後にブロックしても、そのDOMコードを実行することは決してなく、 's'に変更されることはありません。今日は非常に奇妙なことが起こっています。

これはChromeでのみ発生します。 Internet ExplorerとEdgeでは問題なく動作します。

Answer 1

アラートが変化した後にポップアップしたい場合は、ちょうどこのようsetTimeout内にそれらをラップ：

document.body.textContent = "hhh"; 
 

 
setTimeout(function() { 
 
    alert("x"); 
 
}, 0);

Answer 2

変数は、ここに無実です。問題は、javascriptの実行とDOMレンダリングの同期化です。 javascriptはシングルスレッドですが、DOM操作は別のスレッドによって実行されており、互いに待っています。

コールスタックには実行するコードがいくつかあり、DOMレンダリングではスタックが空になるまで待機します。しかしその前に、あなたはユーザーに凍結する警告ウィンドウを表示していますすべて。したがって、ユーザーが警告ウィンドウのボタンをクリックするまで、DOMの回転は決して起こりません。 DOMは、そのブロックコードの前にそれ自体を更新する一巻きを有することができるよう

イブラヒムを示唆しているような延期方法は、次 JSイベントループにブロックの実行時間をシフトさせます。

this videoの関連部分を見ることをおすすめします。

Answer 3

alert()は、アラートボックスが閉じられるまで、JavaScriptの実行とページのレンダリングを一時停止するという問題があります。

alert()をカスタムポップアップ機能で上書きすると、JavaScriptがフリーズしなくなり、すべてのブラウザで同じように見えます。

if (success) { 
    if (success) { 
     ... 

が冗長であることを

if (Xusername === "admin" && Xpassword === "password") { 
    document.getElementById("wrong").innerHTML = "s"; 
    alert("success"); 
    //document.getElementById("author").innerHTML = "success"; //remove when done 
    alert("x"); 
} else { 
    document.getElementById("wrong").innerHTML = "The username or password is incorrect."; 
} 

注：

は、それとは別に、私はコードを単純化することをお勧めします。