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

Question

我正在尝试解决我遇到的一个问题，但我有点纠结于如何做到这一点。

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

我已经尝试了一些基于承诺的代码，但我想知道做我正在尝试做的事情的最佳方法是什么？

$.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 请求完成后"停止"该函数？

使用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);
}

小提琴

Answer 2

使用此方法： 它将在该页面上的每个 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 3

你很接近。现在，只需在成功回调中使用clearInterval即可在请求完成后停止函数。另外，避免将原版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 4

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 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);
}