在等待 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

使用这种方法： 它会在该页面上的每个 ajax 调用上显示一个 gif 微调器或加载器，因此只需在您的 js 文件中添加此函数并提供该图像的路径。

  // Add Loader on every ajax calls
        $("body").once('body').prepend("<div id='spinner-amt'><img src='/assets/images/spinner.gif'></div>");
        $(document).ajaxSend(function(){
          $('#spinner-amt').show();
        });
        $(document).ajaxComplete(function(){
          $('#spinner-amt').hide();
        });

如果你想设计加载器，只需将以下 css 添加到你的 css 文件中。下面的 css 将在页面中间显示微调器。

#spinner-amt {
  width: 100%;
  position: fixed;
  z-index: 99999;
  height: 100%;
  text-align: center;
  padding-top: 45vh;
}

Answer 2

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

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

这是一个使用回调的简单示例（假设为 jQuery）。现在酷孩子们使用 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

Answer 3

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

    $.ajax({
      type: "POST",
      url: "controllers/register.php",
      data: $("form").serialize(),

      success:() => {
 let elem = document.getElementById('para');  
 elem.innerHTML += " ."

      },
error:() => {
          let elem = document.getElementById('para');  
         elem.innerHTML += " ."
          }
    })

在调用 ajax 之前调用所有加载到内部 HTML 并在成功或错误时删除它

Answer 4

你很接近。现在只需在成功回调中使用clearInterval 即可在请求完成后停止该函数。另外，避免将 vanilla JS 与 JQuery 混合使用。

这是一个基于您的代码的有效JSFiddle，因此您可以看到它的实际效果。

function LoadingBar() {
  $('#para').html('Loading .');

  loading = setInterval(() => {
    $('#para').append(" .");
  }, 100);
}

$(function() {
  $.ajax({
    type: "POST",
    url: "controllers/register.php",
    data: $("form").serialize(),
    beforeSend: () => {
      LoadingBar();
    },
    success: (data) => {
      clearInterval(loading);
      $('#para').html(data);
    }
  });
});

Answer 5

使用clearInterval。

例子：

let intervalId;

$.ajax({
  type: "POST",
  url: "controllers/register.php",
  data: $("form").serialize(),
  beforeSend:() => {
    startLoading();
  },
  success:() => {
    stopLoading();
  }
})

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

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

function stopLoading() {
  clearInterval(intervalId);
}