调用函数时开始旋转并在函数结束时停止的微调器按钮
Spinner button that starts spinning when function is called and stops when it ends
我正在尝试制作一个旋转按钮,它会在我发出 AJAX 请求时旋转,并在收到答案时停止。
我已经处理了 AJAX 但旋转似乎不适用于以下代码:
function refresh (id){
var iconElem = document.getElementById("spinner" + id);
iconElem.classList.add('fa-spin');
sleep(5000);
var buttonRefresh = document.getElementById("refreshButton" + id);
buttonRefresh.classList.remove("fa-spin");
};
注意:我已经用睡眠替换了 ajax 函数(在其他地方实现,但它的工作方式应该如此)因为我处于非 php 环境中。
这里发生的是 class "fa-spin" 在睡眠结束时被添加,即使它出现在代码之后......我是否缺少某种 [=我需要执行 20=] 才能使添加的 class 生效?
您需要在 ajax 调用的完成回调中停止旋转,因为它是异步调用。
您在这里所做的是启动,然后在 ajax 调用甚至完成之前立即停止微调器。
$.ajax({
url: "test.html",
cache: false,
success: function(html){
// stop the spinner here
}
});
这是带回调的最简单的解决方案:
function sleep(callback,timeout){
setTimeout(callback,timeout)
}
sleep(() => {
//stop spinner here
},200)
无论如何,我建议你多看书here
如果您正在执行 ajax 请求,您还可以使用 async:false
header 来同步您的请求,然后您的代码应该可以工作。
仅当 JavaScript 函数完成并且 returns 进入主事件循环时,对文档样式或内容的更改才会生效。因此,假设您的 sleep()
功能按预期工作(通过忙等待或类似的方式,尽管实际上并不是 sleeping),您只能看到总效果函数 returns 时所有变化。如果您遵循其他答案的建议并在 AJAX 调用的回调中删除样式,您会没事的。
我正在尝试制作一个旋转按钮,它会在我发出 AJAX 请求时旋转,并在收到答案时停止。
我已经处理了 AJAX 但旋转似乎不适用于以下代码:
function refresh (id){
var iconElem = document.getElementById("spinner" + id);
iconElem.classList.add('fa-spin');
sleep(5000);
var buttonRefresh = document.getElementById("refreshButton" + id);
buttonRefresh.classList.remove("fa-spin");
};
注意:我已经用睡眠替换了 ajax 函数(在其他地方实现,但它的工作方式应该如此)因为我处于非 php 环境中。
这里发生的是 class "fa-spin" 在睡眠结束时被添加,即使它出现在代码之后......我是否缺少某种 [=我需要执行 20=] 才能使添加的 class 生效?
您需要在 ajax 调用的完成回调中停止旋转,因为它是异步调用。 您在这里所做的是启动,然后在 ajax 调用甚至完成之前立即停止微调器。
$.ajax({
url: "test.html",
cache: false,
success: function(html){
// stop the spinner here
}
});
这是带回调的最简单的解决方案:
function sleep(callback,timeout){
setTimeout(callback,timeout)
}
sleep(() => {
//stop spinner here
},200)
无论如何,我建议你多看书here
如果您正在执行 ajax 请求,您还可以使用 async:false
header 来同步您的请求,然后您的代码应该可以工作。
仅当 JavaScript 函数完成并且 returns 进入主事件循环时,对文档样式或内容的更改才会生效。因此,假设您的 sleep()
功能按预期工作(通过忙等待或类似的方式,尽管实际上并不是 sleeping),您只能看到总效果函数 returns 时所有变化。如果您遵循其他答案的建议并在 AJAX 调用的回调中删除样式,您会没事的。