ajaxで待機するjqueryが必要ですが、async：falseが機能していません。

Question

DBの結果を表示するボタンをクリックすると表示されるビューがあります。結果が返されている間にボタンを無効にしてから、セクションがいっぱいになったら有効にします。ただし、ビューを書き込む前にボタンを有効にしておくと、ボタンを何度もクリックしたままにしておくと、セクションが複数回イン/アウトされます。ここで私が使用しているコードは次のとおりです。

$('#ViewComments').click(function() { 
$("#ViewComments").prop("disabled", true); // Disable View Comments button after click 
var tr = $('tr'); 
$("#CommentResults").find(tr).remove(); 
$("#InsertComment").focus(); 
var parcel_id = $('#ParcelId').val(); 
$.ajax({ 
    url: "classes/get-comments.php?parcel_id=" + parcel_id, 
    type: "GET", 
    dataType: "json", 
    async : false, 
    error: function (SMLHttpRequest, textStatus, errorThrown) { 
     alert("An error has occurred making the request: " + errorThrown); 
    }, 
    success: function (comments) { 
     for (var i = 0; i < comments.length; i++) { 
      var tr = $('<tbody></tbody>'); 
      if (comments[i].comment == null || comments[i].comment == "") { 
       tr.append("<tr><td><span class='comment1'>Entered By: " + comments[i].name + "</span></td><td style=\"text-align:left; width:25%;\"><span class='comment1'>" + comments[i].date_created + "</span></td></tr><tr><td colspan=\"2\"><span style=\"font-style:italic;\">No comment entered.</span></td></tr>"); 
      } else { 
       tr.append("<tr><td><span class='comment1'>Entered By: <span class='comment2'>" + comments[i].name + "</span></span></td><td style=\"text-align:left; width:75%\"><span class='comment1'>" + comments[i].date_created + "</span></td></tr><tr><td colspan=\"2\">" + comments[i].comment + "</td></tr>"); 
      } 
      $('#CommentResults').append(tr); 
     } 
     $('#Comments').slideToggle('slow'); 
    } 
    });//end ajax call 
//}); 
$("#ViewComments").prop("disabled", false); // re-enable View Comments button 
}); //end view comments click function 

ご意見やご感想はありがとうございます。あらかじめThx。

Answer 1

$("#ViewComments").prop("disabled", false); // re-enable View Comments buttonを成功とエラーのコールバックに移動する必要があります。そうしないと、ボタンはAJAXリクエストが開始されるとすぐに有効になり、完了した時点では再び有効になりません。ここでは、私たちあなたのコードに私の更新：[？どうすればjQueryの非同期= falseをせずにAJAX呼び出しをブロックしないでください]の

$('#ViewComments').click(function() { 
 
$("#ViewComments").prop("disabled", true); // Disable View Comments button after click 
 
var tr = $('tr'); 
 
$("#CommentResults").find(tr).remove(); 
 
$("#InsertComment").focus(); 
 
var parcel_id = $('#ParcelId').val(); 
 
$.ajax({ 
 
    url: "classes/get-comments.php?parcel_id=" + parcel_id, 
 
    type: "GET", 
 
    dataType: "json", 
 
    async : false, 
 
    error: function (SMLHttpRequest, textStatus, errorThrown) { 
 
     alert("An error has occurred making the request: " + errorThrown); 
 
     $("#ViewComments").prop("disabled", false); // re-enable View Comments button 
 
    }, 
 
    success: function (comments) { 
 
     for (var i = 0; i < comments.length; i++) { 
 
      var tr = $('<tbody></tbody>'); 
 
      if (comments[i].comment == null || comments[i].comment == "") { 
 
       tr.append("<tr><td><span class='comment1'>Entered By: " + comments[i].name + "</span></td><td style=\"text-align:left; width:25%;\"><span class='comment1'>" + comments[i].date_created + "</span></td></tr><tr><td colspan=\"2\"><span style=\"font-style:italic;\">No comment entered.</span></td></tr>"); 
 
      } else { 
 
       tr.append("<tr><td><span class='comment1'>Entered By: <span class='comment2'>" + comments[i].name + "</span></span></td><td style=\"text-align:left; width:75%\"><span class='comment1'>" + comments[i].date_created + "</span></td></tr><tr><td colspan=\"2\">" + comments[i].comment + "</td></tr>"); 
 
      } 
 
      $('#CommentResults').append(tr); 
 
     } 
 
     $('#Comments').slideToggle('slow'); 
 
     $("#ViewComments").prop("disabled", false); // re-enable View Comments button 
 
    } 
 
    });//end ajax call 
 
//}); 
 
}); //end view comments click function

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="ViewComments">View comments</button> 
 
<button id="InsertComment">View comments</button> 
 
<div>ParcelID: <input id="ParcelId" value="5" type="Number /></div> 
 
<div id="Comments"> 
 
    <div id="CommentResults"></div> 
 
</div>