需要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>