javascript - 如何在后台进行ajax请求和html元素更新？

Question

我的 html 表单包含三个元素 - 按钮开始和停止以及文本区域。一旦按下开始按钮，我想执行多个ajax请求，一旦收到结果以更新文本区域，一旦按下停止按钮，就应该停止处理ajax请求。

我尝试做如下的事情:

$(document).ready(function(){
  var inProgress = false;

  $("#stop").click(function() {
    inProgress = false;
  });

  $("#start").click(function() {
    inProgress = true;
    while (inProgress) {
      $('#textarea').html($('#textarea').val()+sometext+'\n');
      $.ajax({url: 'http://example.com'})
      .done(function(data, textStatus, jqXHR) {
         $('#textarea').html($('#textarea').val()+someresult+'\n');
      });
    }
  });

但它没有按预期工作 - 浏览器选项卡挂起。我的代码有什么问题吗？

Answer 1

不要使用 while 循环。您应该以异步方式执行此操作:在 .done 函数末尾，放置另一个异步 ajax 调用。

// other stuff goes here

function doRequest() {
      $.ajax({url: 'http://example.com'})
      .done(function(data, textStatus, jqXHR) {
         $('#textarea').html($('#textarea').val()+someresult+'\n');

         if (inProgress) doRequest();
      });
}

$("#start").click(function() {
    inProgress = true;
    $('#textarea').html($('#textarea').val()+sometext+'\n');
    doRequest();
});