javascript - 在等待 ajax 请求完成时运行函数

Question

我正在尝试解决我遇到的问题，但我对如何解决这个问题有些困惑。

我目前正在通过 AJAX 发布到我的 PHP 页面，在等待请求响应时，我想运行一个函数来简单地显示加载.. 并添加一个额外的“。”每 100 毫秒。我的问题是如何调用一个函数，然后在我的 ajax 请求完成后“停止”该函数？

我尝试了一些基于 promise 的代码，但我想知道什么是完成我想做的事情的最佳方法？

$.ajax({
  type: "POST",
  url: "controllers/register.php",
  data: $("form").serialize(),
  beforeSend:() => {
    // Start LoadingBar() Here.
  },
  success:() => {
    // Stop LoadingBar() Here.
  }
})

function LoadingBar() {
  let elem = document.getElementById('para');
  elem.innerHTML += "Loading ."

  setInterval(() => {
    elem.innerHTML += " ."
  }, 100);
}

如能提供任何帮助或指导，帮助我找到解决此问题的信息，我们将不胜感激。

Answer 1

How can I call a function and then 'stop' that function when my ajax request has completed?

使用 setInterval 将点添加到进度条，然后在请求完成时使用 clearTimeout 清除返回的句柄。

这是一个使用回调的简单示例(假设使用 jQuery)。现在酷 child 要么使用 promises 要么使用 async/await，但它们在底层都是一样的。

function load() {
  // Start the animation.
  $('#results').hide();
  $('#progress-bar').show();

  const timeoutHandle = setInterval(incrementProgress, 100);

  fakeRequest(function successCallback() {
    // When the request is done...

    // 1. Clean up the animation timer.
    clearTimeout(timeoutHandle);

    // 2. Display results and hide the animation.
    $('#progress-bar').hide();
    $('#results').show();
  });
}

function incrementProgress() {
  $('#progress-bar').get(0).innerHTML += '.';
}

function fakeRequest(callback) {
  // This doesn't actually load data.
  // Launch your ajax request instead.
  setTimeout(callback, 1000);
}

fiddle