（同期）Ajax中にブラウザのロックを停止しますか？

Question

私がやろうとしているのはdivに読み込み中のイメージを追加することです（ユーザーが何かを読み込んでいることを知っている）ので、jquery ajax関数を呼び出します。これは "async：false"に設定されています。

$jQuery("#playersListDiv").html(loadingImage);  
$jQuery.ajax({ 
     type: "POST", /* this goesn't work with GET */ 
     url: urlValue, /*ex: "NBAgetGamesList.php" */ 
     data: parameters, /*ex: "param1=hello" */ 
     cache: false, 
     async: false, 
        success: function(data){ 

        } 
}); 

問題はそのブラウザがロックされ、AJAX呼び出しはもちろん無用である行われた後までロード画像を追加していません。ここに私のコードです。 Firefoxは実際に読み込み中の画像を追加する唯一のブラウザです。 IE、Chrome、Safariは読み込み中の画像を追加しません。

asyncがfalseに設定されているため、ブラウザのロックが発生することがわかりましたが、返されたデータが必要なため、この要求が完了するまで待つ必要があるため、これが唯一のオプションです。

これを回避する手段はありますか？私は、私は私が私は毎回ポップアップ警告を欲しくない読み込みイメージを追加した後に警告を配置する場合。

Answer 1

逆にあなたのアサーションにもかかわらず、は同期が必要です。レスポンスの後に/レスポンス後に行う必要があることは、成功（および/またはエラーまたは完了）コールバックで行うことができます。だから、変更：

$jQuery("#playersListDiv").html(loadingImage);  
$jQuery.ajax({ 
    ... 
    async: false, 
    ... 
}); 
// OTHER CODE 

このようになり：

$jQuery("#playersListDiv").html(loadingImage);  
$jQuery.ajax({ 
    ... 
    async: true, 
    success: function(data) { 
     // OTHER CODE 
    } 
}); 

それとも、成功コールバックから呼び出す別の関数に「他のコード」を移動します。

あなたはそれよりも複雑なものが必要な場合は、機能に上記をカプセル化し、それにコールバックを渡すことができます。

function doAjaxStuff(callback) { 
    $jQuery("#playersListDiv").html(loadingImage);  
    $jQuery.ajax({ 
     ... 
     async: true, 
     success: function(data) { 
      // optional other processing here, then: 
      callback(data); 
     } 
    }); 
} 

// then from somewhere else in your code: 
doAjaxStuff(function(data) { 
    // do something with data 
}); 

Answer 2

jQuery.Deferred()です。

Answer 3

私はこの問題に出くわしたと私はそれのための解決策を見つけました。
とします。 ajax requestにasync : falseを使用する必要があり、実行中に読み込み中の画像を表示する場合は、ajaxリクエストを送信してください。しかし、ajaxは、async : falseのため、他のUI操作（画像のロード表示）を停止しようとしています。だから、そのための簡単な解決策は、ローディングイメージを表示するにはfadeInを使用し、ローディングイメージを非表示にするにはfadeOutを使用してください。

ここには、async : falseというajaxリクエストを含むjsFiddleデモがあります。これにより、ロード中の画像は表示されません。 （私はローディングイメージを表示するためにshowメソッドを使用しました）。

jsFiddleにfadeInとfadeOutエフェクトを追加しました。 ajaxリクエストにasync : falseにかかわらず画像を表示します。