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

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 调用的回调中删除样式,您会没事的。