以下に、js ajax 同期リクエストによって引き起こされるブラウザーの一時停止の問題を解決する記事を共有します。これは良い参考値なので、皆様のお役に立てれば幸いです。
1. 問題の原因
今日リクエストをしたときに遭遇したのは、ユーザーのパーソナルセンターにボタンをクリックするとユーザーの現在のポイントを更新できる機能があります。間違いなく ajax 同期リクエストを使用する必要があります。当時、私は click、click、five、dividing by 2 で遊んでいたのですが、そのコードは次のとおりです。入力しただけなら問題ありませんが、ユーザーが更新をクリックしたときに問題が発生しました。ポイントボタンをクリックしても、コピーは「更新中」に変更されませんでしたが、Ajax リクエストが送信されたため、Web ページのコードを確認しました。 js は、copy 要素と html 要素にバインドされている onclick イベントを実際に削除し、リクエストが成功した後にそれを元に戻しましたが、その時点ではページのコピーライティングは変わっていませんでした。 HTML コードが変更されたのに、ページは変更されていない理由がわかりません。 2. 問題の原因を理解します
問題の根本: その時点でトラブルシューティングを実施し、最終的に問題が原因であることがわかりました。 「async:false」問題を非同期に置き換えれば問題はないのに、なぜ同期リクエストによってコードエラーが発生するのでしょうか。 理由: ブラウザのレンダリング (UI) スレッドと js スレッドは相互に排他的であり、時間のかかる js 操作を実行すると、ページのレンダリングがブロックされます。非同期 ajax を実行する場合は問題ありませんが、同期リクエストに設定すると、他のアクション (ajax 関数の背後にあるコードとレンダリング スレッド) が停止します。リクエストが開始される前の文に DOM 操作ステートメントが含まれている場合でも、この同期リクエストは実行時間を与えずに UI スレッドを「すぐに」ブロックします。
これがコードが失敗する理由です。
3. 問題の解決
1. setTimeout を使用して、sestTimeout にスレッドを再起動させました。これにより、問題が解決されました。 :/** * 异步当前用户积分 by zgw 20161216 * @return {[type]} [description] */ function flushIntegralSum() { //点击按钮刷新前修改按钮的文案,已经去掉点击事情,防止多次点击 $("#flushbutton").replaceWith('<a style="color:#3fb0ff;font-size:14px;" href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="flushbutton">正在刷新</a>'); $.ajax({ url:'URL', type:'post', async:false, // data:{}, success:function(json){ json = eval('('+json+')'); if(json.url){window.location.href=json.url;return;} $("#flushbutton").replaceWith('<a style="color:#3fb0ff;font-size:14px;" href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" onclick="flushFreeSum();" id="flushbutton">刷新积分</a>'); if(json.code!=1){ alert(json.msg); }else{ $("#free_sum").html(json.free_sum); } return; } }); }
2. Deferred
を使用してを解決します。上記は、すべての人のためにまとめたものです。将来、すべての人に役立つことを願っています。関連記事: Vue でカスタム命令を実装するには?
vueの親コンポーネントを介してサブコンポーネントのスタイルを変更する方法
vue-resourceのjsonpクロスドメインの問題について
vue+webpackで非同期コンポーネントの読み込みを実装するにはどうすればよいですか?
vue.jsでNginxを使用してクロスドメインの問題を解決する
Node.jsでmysqlトランザクションの自動リサイクル接続を実装する方法
以上がAjax 同期操作中にブラウザーが一時停止したアニメーション (詳細なチュートリアル)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。