需要jQuery等待Ajax，但異步：假不工作

Question

我有一個視圖打開按鈕單擊以顯示數據庫結果。我想在返回結果時禁用按鈕，然後在填充該部分後啓用它。然而，它會禁用，然後在視圖被填寫之前啓用該按鈕，並且人們不斷點擊按鈕多次 - 這會導致該部分多次切換輸入/輸出。這裏是我使用的代碼：

$('#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請求，按鈕就會重新啓用，而不是在完成時啓用。這裏我們我的更新代碼：

$('#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>