Javascript 微调器按钮，在调用函数时开始旋转，在函数结束时停止

我正在尝试制作一个微调器按钮，当我发出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");

};

注意：我已经用其他地方实现的sleep替换了ajax函数，但它的工作原理与应该的一样，因为我在一个非php环境中

---

这里发生的事情是，在睡眠结束时添加类fa spin，即使它在代码中位于后面。。。为了使添加的类有效，我是否缺少需要执行的某种刷新

您需要在ajax调用的完成回调中停止旋转，因为它是一个异步调用。 这里要做的是在ajax调用完成之前启动并立即停止微调器

$.ajax({
  url: "test.html",
  cache: false,
  success: function(html){
   // stop the spinner here
  }
});

---

您需要在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)

无论如何，我建议你多读点书

---

如果您正在执行ajax请求，还可以使用async:false标头使请求同步，这样代码就可以正常工作。

下面是回调的最简单解决方案：

function sleep(callback,timeout){
  setTimeout(callback,timeout)
}

sleep(() => {
  //stop spinner here
},200)

无论如何，我建议你多读点书

---

---

如果您正在执行ajax请求，还可以使用async:false标头使请求同步，然后您的代码应该可以工作。

对文档样式或内容的更改只有在JavaScript函数完成并返回到主事件循环时才会生效。因此，假设您的sleep函数通过执行繁忙等待或类似操作而按预期工作，尽管这不是真正的睡眠，但您只能在函数返回时看到所有更改的总体效果。如果您遵循其他答案的建议，并删除AJAX调用回调中的样式，您就没事了。

对文档样式或内容的更改只有在JavaScript函数完成并返回到主事件循环时才会生效。因此，假设您的sleep函数通过执行繁忙等待或类似操作而按预期工作，尽管这不是真正的睡眠，但您只能在函数返回时看到所有更改的总体效果。如果您遵循其他答案的建议并删除AJAX调用回调中的样式，您会很好。

从代码中很难看出，但您似乎需要接受AJAX的异步特性。如果您可以分享您如何进行调用，那将是一件好事。这是一种错误的方法。AJAX是异步的，尽管代码是“顺序”的。您应该仔细阅读AJAX回调并删除回调函数中的spinner类。您是否尝试过使用AJAX的回调或成功块？从您给出的代码中，您正在调用在不同元素上添加fa spin，而不是从中删除fa spin。从代码中很难分辨，但是看起来你需要接受AJAX的异步特性。如果你能分享一下你是如何进行调用的，那就太好了。这是错误的方法。AJAX是异步的，尽管代码是“顺序”的。您应该仔细阅读AJAX回调并删除回调函数中的spinner类。您是否尝试过使用AJAX的回调或成功块？从您给出的代码中，您在另一个元素上调用adding fa spin，而不是从中删除fa spin。您是如何得出ajax是异步的结论的？谢谢您的提醒，但是为什么我的函数现在不能正常工作？自从我用sleep替换了AJAX之后，还没有出现AJAX。sleep本身就是一个异步功能。哦，我没有看到它的出现，这就解释了它。。。谢谢大家!@SrimoyeeSen sleep可能正在调用一个同步的ajax请求，然后op的代码就可以使用async:false header了。您是如何得出ajax是异步的结论的？谢谢提醒，但是为什么我的函数现在不能正常工作呢？自从我用sleep替换了AJAX之后，还没有出现AJAX。sleep本身就是一个异步功能。哦，我没有看到它的出现，这就解释了它。。。谢谢大家!@SrimoyeeSen sleep可能正在调用一个同步的ajax请求，然后op的代码就可以使用async:false headerOk了这就是我要查找的实际信息，谢谢！我将按照其他答案的建议进行修复，但这实际上解释了我当前脚本的情况。好的，这就是我要查找的实际信息，谢谢！我将按照其他答案的建议进行修复，但这实际上解释了我当前脚本的情况。