Node.js + Express の構成でWEBアプリを作ろうとしています。
Ajaxを使いたくて下記ソースのような感じで書きました。

javascript
1$.ajax({
2	async: false,
3	url: '/hoge',
4	type: 'post',
5	dataType: 'json',
6	data: data
7}).done(function(res){
8	//やりたい事
9}).fail(function(xhr, status, error){
10	//やりたい事
11});

ちゃんと期待通りの結果は得られたのですが、ブラウザ側のconsoleに下記のような警告がでるのが気になります。
Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience.

同期処理をメインスレッドに書くのは非推奨という内容のようですが、「async:false」は使っては使ってはいけないのでしょうか？

行動規範の内容に同意します

回答2件

「async:false」は使っては使ってはいけないのでしょうか？

そうですね。
どうしても順序が必要なのであれば、$.whenやpromiseで処理すれば良いと思います

追記

今回はIE対応のためdialogではなくdivで処理します

mypage.htm

HTML
1<body>
2<input type="button" value="go">
3<span id="hoge"></span>
4<div id="modal">
5<p>
6<div>Loading ...</div>
7<hr>
8<input type="button" value="cancel">
9</p>
10</div>
11<div id="modal_back"></div>
12</body>

CSS
1#modal{
2z-index:2;
3display:block;
4position:absolute;
5left:45%;
6top:45%;
7border-style:outset;
8width:100px;
9background-Color:e0e0e0;
10}
11#modal_back{
12z-index:1;
13display:block;
14position:absolute;
15top:0px;
16left;0px;
17width:100%;
18height:100%;
19background-Color:rgba(0,0,128,0.6);
20}

javascript
1$(function(){
2  var myxhr;
3  $('#modal,#modal_back').hide();
4  $('input[type=button][value=go]').on('click',function(){
5    $('#modal,#modal_back').show();
6    myxhr=$.ajax({
7      "url":"send.php",
8      "cache":false,
9    }).done(function(data){
10      $('#modal,#modal_back').hide();
11      $('#hoge').html(data);
12    });
13  });
14  $('#modal input[type=button][value=cancel]').on('click',function(){
15    if(myxhr) myxhr.abort();
16    $('#modal,#modal_back').hide();
17  });
18});
19

send.php

※3秒待って現在の日時を表示する

PHP
1<?PHP
2sleep(3);
3print date("Y-m-d H:i:s");
4?>

投稿2017/11/06 10:16

編集2017/11/07 03:23

yambejp

総合スコア116487

uroncha

2017/11/06 23:33

$.whenやpromiseを調べてみました。仰ることが少しわかった気がしました。ありがとうございました。

yambejp

2017/11/07 03:25 編集

とりあえずモーダル風の処理のサンプルを上げておきました実際のところもっときちんとしたライブラリも多数公表されているので流れをみる参考程度に

uroncha

2017/11/07 08:04

流れはバッチリ理解できました。感謝です。ありがとうございました。

行動規範の内容に同意します

ベストアンサー

async:falseは使っては使ってはいけないのでしょうか？

自分だけが使うWebアプリであったり、同期処理によってブラウザーが一時的に固まる可能性を事前に許容している限られた身内的なユーザーが対象のWebアプリであれば、async:falseにするのも１つの選択肢になるかもしれませんが、一般ユーザー向けなのであれば、UI操作がブロックされないように非同期で処理を行うべきところです。

投稿2017/11/06 10:35