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

Question

我正在尝试创建一个微调按钮，该按钮将在发出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");

};

注意：由于我处于非PHP环境中，因此我已将ajax函数替换为sleep（在其他地方实现，但工作原理与应该的一样）。

这里发生的是，即使在代码中出现了睡眠之后，仍在睡眠结束时添加了“ fa-spin”类。我是否缺少需要在其中执行的某种“刷新”为了使添加的类有效？

Answer 1

您需要在ajax调用的完成回调中停止旋转，因为它是异步调用。您在此处的操作是启动，然后在ajax调用甚至结束之前立即停止微调器。

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

Answer 2

这是带有回调的最简单的解决方案：

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

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

无论如何，我建议您阅读更多here

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