同期のためにスタイルの変更が延期されました

Question

ajax呼び出しのロードバーを作成しようとしています。今は同期していますが、同期の呼び出しが完了した後にのみスタイルが変更されるという問題があります。

このフィドルは私の問題を示しています。 https://jsfiddle.net/cbwevtda/

$("button").on('click',function(d) { 
    document.getElementById("myH2").style.color = "#ff0000"; 
    document.getElementById("myP").style.color = "magenta"; 
    sleep(3000); 
    document.getElementById("myP2").style.color = "blue"; 
    document.getElementById("myDiv").style.color = "lightblue"; 
}) 

すべての色は、スリープ機能が終了した後にのみ変更されます。スタイルに変更を同期的に適用する方法はありますか？

Answer 1

コードは同期して実行されています。各行は順に実行され、前の行が完了するのを待たなければなりません。メインスレッドは、コード内の次の行に進む前に 'スリープ'機能が戻るのを待ちます。メインスレッドは、あなたがこれまであなたの例を変更して違いを見ることができます

がブロックされないように

はJavaScriptを使用すると、...できるだけ多くの非同期コードを記述してみてください

$("button").on('click',function(d) { 
    document.getElementById("myH2").style.color = "#ff0000"; 
    document.getElementById("myP").style.color = "magenta"; 

    setTimeout(function() { 
     sleep(3000); 
    }, 10); 

    document.getElementById("myP2").style.color = "blue"; 
    document.getElementById("myDiv").style.color = "lightblue"; 
}) 

これは、10msが経過した後の最初の可能なインスタンスで実行される匿名コールバック関数をキューに入れるようにJavaScriptに指示します。

AJAXを扱っているとき、AJAXは本質的に非同期であり、メインスレッドをブロックしないため、これは問題にはなりません。