Ajax 同期操作中にブラウザーが一時停止したアニメーション (詳細なチュートリアル)

以下に、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(&#39;<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>&#39;);
  $.ajax({
   url:&#39;URL&#39;,
   type:&#39;post&#39;,
   async:false,
   // data:{},
   success:function(json){
    json = eval(&#39;(&#39;+json+&#39;)&#39;);
    if(json.url){window.location.href=json.url;return;}
    $("#flushbutton").replaceWith(&#39;<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>&#39;);
    if(json.code!=1){
     alert(json.msg);
    }else{
     $("#free_sum").html(json.free_sum);
    }
    return;
   }
  });
 }

setTimeout の 2 番目のパラメータは 0 に設定され、ブラウザは設定された最小時間の後にそれを実行します

問題はここで解決されますが、次の場合はボタンをクリックしたときにポップアップを試みることができます必要な gif 画像です。画像は回転しており、更新中であることがわかります。画像は表示されますが、同期要求が遅れているにもかかわらず、UI スレッドがまだ動いていないことがわかります。実行ブロック中に送信されます。このブロッキングは非常に優れており、gif画像さえも動かず、静止画像のように見えます。結論は明らかです。SetTimeout は症状を解決しますが、根本的な原因は解決しません。これは、同期リクエストを「わずかに」非同期にすることと同じであり、その後も同期の悪夢が発生し、スレッドがブロックされることになります。リクエストを送信する前の簡単な操作

2. Deferred

を使用して

を解決します。上記は、すべての人のためにまとめたものです。将来、すべての人に役立つことを願っています。

関連記事: Vue でカスタム命令を実装するには?

vueの親コンポーネントを介してサブコンポーネントのスタイルを変更する方法

vue-resourceのjsonpクロスドメインの問題について

vue+webpackで非同期コンポーネントの読み込みを実装するにはどうすればよいですか?

vue.jsでNginxを使用してクロスドメインの問題を解決する

JavaScriptで最大の共通部分文字列を実現する方法

Node.jsでmysqlトランザクションの自動リサイクル接続を実装する方法

以上がAjax 同期操作中にブラウザーが一時停止したアニメーション (詳細なチュートリアル)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。