我正在尝试解决我遇到的问题,我对如何执行此操作有些困惑。

我目前正在通过AJAX发布到我的PHP页面,并且在等待请求响应的同时,我想运行一个简单地显示加载中的函数,并添加一个附加的“。”。每100ms。我的问题是我的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);
}


我们将不胜感激,对我在哪里可以找到可以解决此问题的信息的任何帮助或任何指示。

最佳答案

我的ajax请求完成后,如何调用一个函数,然后“停止”该函数?


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

这是一个仅使用回调的简单示例(假设使用jQuery)。如今,很酷的孩子们都使用诺言或异步/等待,但是在引擎盖下都是一样的。

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

10-01 17:42
查看更多