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

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

};

注意：我已经用睡眠替换了 ajax 函数（在其他地方实现，但它的工作方式应该如此）因为我处于非 php 环境中。

这里发生的是 class "fa-spin" 在睡眠结束时被添加，即使它出现在代码之后......我是否缺少某种 [=我需要执行 20=] 才能使添加的 class 生效？

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 header 来同步您的请求，然后您的代码应该可以工作。

Answer 3

仅当 JavaScript 函数完成并且 returns 进入主事件循环时，对文档样式或内容的更改才会生效。因此，假设您的 sleep() 功能按预期工作（通过忙等待或类似的方式，尽管实际上并不是 sleeping），您只能看到总效果函数 returns 时所有变化。如果您遵循其他答案的建议并在 AJAX 调用的回调中删除样式，您会没事的。

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

Spinner button that starts spinning when function is called and stops when it ends

javascript

spinner