jQuery の削除が同期しないのはなぜですか?

Question

ページ上に以下のボタンがあります

リーリー

このページに対応するjsスクリプトは以下の通りです

リーリー

スタート ボタンをクリックしてからテスト ボタンをクリックした後、テスト ボタンが削除される前に実際にスリープ状態になるのはなぜですか (これは同期された $.ajax リクエストで認識され、ここではループでシミュレートされています)。 setTimeout で sleep をラップすることによってのみ、目的の効果を得ることができます...?

Answer 1

この質問は確かにちょっと… 一見、コードが意図的に10秒間スリープしているのかと思いましたが、上のコメント欄のコメントからはおそらくわかりません。質問は...

これはブラウザ UI スレッドに関連しています。ブラウザはシングルスレッドです (このスレッドは一般にブラウザ UI スレッドと呼ばれます)。

「高性能 JavaScript」の第 6 章、高速応答ユーザー インターフェイスには 2 つの段落があります:

ほとんどのブラウザには、JavaScript タスクとユーザー インターフェイス更新タスクという 2 つのタスク間で共有される単一の処理プロセスがあります。 これらの操作は一度に 1 つだけ実行されます。つまり、JavaScript コードの実行中はユーザー インターフェイスが入力に反応できず、その逆も同様です。つまり、JavaScript の実行中、ユーザー インターフェイスは「ロック」されます。 JavaScript ランタイムの管理は、Web アプリケーションのパフォーマンスにとって重要です。

JavaScript と UI の更新によって共有されるプロセスは、「ブラウザ UI スレッド」と呼ばれることがよくあります。 UI スレッドの作業は単純なキュー システムに基づいており、タスクはプロセスがアイドル状態になるまでキューに保存されます。アイドル状態になると、キュー内の次のタスクが再抽出されて実行されます。これらのタスクは、JS コードを実行するか、再描画やリフローを含む UI 更新を実行します。

リーリー

これはクリック イベント処理関数です。js が DOM ノードを削除した後、func() はすぐに実行を継続し、次のタスクが実行されるまでプロセスはアイドル状態になり、ユーザー インターフェイスのみが更新されます。その後、ボタンはページから消えます。

上記の別の回答のコメント欄にある質問「追加時にこれが起こらないのはなぜですか?」

追加された機能はこんな感じです

リーリー

このプロセスは func() を実行しません。この関数を移動して、これに変更してみてください。 リーリー

もちろんブロックします

Answer 2

スレッドをブロックしたため、グラフィックのレンダリングが停止した可能性があります

ボタンがdomツリーから削除されている場合でも。

しかし、グラフィックスは、ボタンが存在しない新しい DOM ツリーを再描画しませんでした。

Answer 3

以前は簡単だと思っていましたが、階下で言われたのと同じはずです、画面のレンダリングが停止しました。
たとえば、 func(); の前にログを出力します。

リーリー

出力ロゴが表示された後、スリープが実行されるまで完全な内容が表示されません。

スリープが実行されると、ページがブロックされ、まったく操作できなくなります。同時に、CPU 使用率が非常に高くなります (このループには理論上間隔がないため)。これがスタックの原因である可能性があります。 。