我正在尝试解决我遇到的问题,我对如何执行此操作有些困惑。
我目前正在通过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