javascript - ajax 在前面完成后执行函数

Question

点击提交后，我得到了一个运行的进度条。
然后应用程序将处理后台任务并更新进度条。

问题是如何在进度条达到 100% 后显示下载按钮，而不是在进度条开始更新时显示下载按钮？

$('form').on('submit', function(event) {
  event.preventDefault();
  var formData = new FormData(this);
  // add task status elements
  div = $('<div class="progress"><div></div><div>0%</div><div>...</div></div>');
  $('#progress').append(div);
  // progress bar
  var nanobar = new Nanobar({
    bg: '#03adff',
    target: div[0].childNodes[0]
  });
  $.ajax({
    type: 'POST',
    url: '/longtask',
    data: formData,
    processData: false,
    contentType: false,
    success: function(data, status, request) {
      status_url = request.getResponseHeader('Location');
      update_progress(status_url, nanobar, div[0]);
    },
    complete: function() {
      $("#dl").css("display", "block");
    },
    error: function() {
      alert('Unexpected error');
    }
  });
})

function update_progress(status_url, nanobar, status_div) {
  // send GET request to status URL
  $.getJSON(status_url, function(data) {
    percent = parseInt(data['current'] * 100 / data['total']);
    nanobar.go(percent);
    $(status_div.childNodes[1]).text(percent + '%');
    $(status_div.childNodes[2]).text(data['status']);
    if (data['state'] != 'PENDING' && data['state'] != 'PROGRESS') {
      if ('result' in data) {
        // show result
        $(status_div.childNodes[3]).text('Result: ' + data['result']);
      } else {
        // something unexpected happened
        $(status_div.childNodes[3]).text('Result: ' + data['state']);
      }
    } else {
      setTimeout(function() {
        update_progress(status_url, nanobar, status_div);
      }, 1000);
    }
  });
}

Answer 1

假设#dl是您的下载按钮。

您可以将 $("#dl").css("display", "block"); 移动到 update_progress 函数中:

$('form').on('submit', function(event) {
  event.preventDefault();
  var formData = new FormData(this);
  // add task status elements
  div = $('<div class="progress"><div></div><div>0%</div><div>...</div></div>');
  $('#progress').append(div);
  // progress bar
  var nanobar = new Nanobar({
    bg: '#03adff',
    target: div[0].childNodes[0]
  });
  $.ajax({
    type: 'POST',
    url: '/longtask',
    data: formData,
    processData: false,
    contentType: false,
    success: function(data, status, request) {
      status_url = request.getResponseHeader('Location');
      update_progress(status_url, nanobar, div[0]);
    },
    error: function() {
      alert('Unexpected error');
    }
  });
})

function update_progress(status_url, nanobar, status_div) {
  // send GET request to status URL
  $.getJSON(status_url, function(data) {
    percent = parseInt(data['current'] * 100 / data['total']);
    nanobar.go(percent);
    $(status_div.childNodes[1]).text(percent + '%');
    $(status_div.childNodes[2]).text(data['status']);
    if (data['state'] != 'PENDING' && data['state'] != 'PROGRESS') {
      if ('result' in data) {
        // Show download button once done
        $("#dl").css("display", "block");
        // show result
        $(status_div.childNodes[3]).text('Result: ' + data['result']);
      } else {
        // something unexpected happened
        $(status_div.childNodes[3]).text('Result: ' + data['state']);
      }
    } else {
      setTimeout(function() {
        update_progress(status_url, nanobar, status_div);
      }, 1000);
    }
  });
}