js ajax同期リクエストによりブラウザが一時停止するアニメーションの問題を解決するにはどうすればよいですか?

この記事は主に、js ajax 同期リクエストによって引き起こされるブラウザーの一時停止アニメーションの問題を解決するための記事を共有するものであり、優れた参考価値があるため、皆様のお役に立てれば幸いです。編集者をフォローして見てみましょう。皆さんのお役に立てれば幸いです。

1. 問題の原因

今日リクエストを行ったときに、ユーザーのパーソナルセンターにボタンをクリックすると、ユーザーの現在のポイントを更新する機能があるという状況に遭遇しました。 ajax 同期リクエストを使用するときは、click、click、three、five、2 で割るというコードを実行しました。クリック、クリック しかし、ユーザーがポイントの更新ボタンをクリックすると、コピーは「更新中」に変更されませんでしたが、ajax リクエストが送信されたため、Web ページのコードを確認したところ、実際には js であることがわかりました。リクエストが成功した後、コピーを HTML 要素にバインドする onclick イベントを削除しましたが、ページのコピーライティングは変更されていませんでした。当時は理由がわかりませんでした。 HTML コードは変更されていますが、ページは変更されていません。 2. 問題の原因を理解します

問題の根本: その時点でトラブルシューティングを行ったところ、最終的に「async: false」の問題であることがわかりました。非同期リクエストに置き換えれば問題ないのですが、なぜ同期リクエストがコードエラーを引き起こすのでしょうか?

原因: ブラウザーのレンダリング (UI) スレッドと js スレッドは相互に排他的であり、時間のかかる js 操作を実行すると、ページのレンダリングがブロックされます。非同期 ajax を実行する場合は問題ありませんが、同期リクエストに設定すると、他のアクション (ajax 関数の背後にあるコードとレンダリング スレッド) が停止します。 DOM 操作ステートメントがリクエストが開始される前の文である場合でも、この同期リクエストは実行時間を与えずに UI スレッドを「すぐに」ブロックします。これがコードが失敗する理由です。

3. 問題の解決

1. setTimeout を使用して、sestTimeout にスレッドを再起動させました。これにより、問題が解決されました。 setTimeout 2 つのパラメータが 0 に設定されている場合、ブラウザは設定された最小時間後に実行します。この問題はここで解決されますが、ボタンをクリックしたときに gif 画像をポップアップしてみると、その画像が常に表示されます。回転すると、プロンプトが更新されますが、画像は表示されますが、同期要求は遅延しますが、実行中に UI スレッドがブロックされるためです。このブロッキングは非常に優れており、gif画像さえも動かず、静止画像のように見えます。結論は明らかです。SetTimeout は症状を解決しますが、根本的な原因は解決しません。これは、同期リクエストを「わずかに」非同期にすることと同じであり、その後も同期の悪夢が発生し、スレッドがブロックされることになります。リクエストを送信する前の短い操作

2. Deferred を使用して問題を解決します

関連する推奨事項:

html5 ブラウザーの一時停止アニメーションを防ぐための WebWorkers サンプル コード共有

Extjs Ajax 同期時の Post メソッド パラメーター送信メソッドrequest_extjs

Ajax リクエストとブラウザ キャッシュに関する簡単な説明

以上がjs ajax同期リクエストによりブラウザが一時停止するアニメーションの問題を解決するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。