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

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 (在其他地方实现，但它应该像它应该的那样工作)。

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

Answer 1

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

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