javascript - 如何根据 AJAX 请求在设定的时间段内显示加载动画

Question

我遇到了这个问题，我的 ajax 请求处理速度太快而无法显示我的加载图标，我只是希望它运行一秒钟左右，我该如何实现这一点？

HTML:

<img class="loader" id="loader" src="Social_Icons/loader.svg" alt="Book Loader Icon">

JS:

$(document).on('click','#sub',function(e) {
    function showLoading(){
        document.getElementById("loader").style = "visibility: visible";
    };
        function hideLoading(){
        document.getElementById("loader").style = "visibility: hidden";
    }
        showLoading();
      var data = $("#text").serialize();
      $.ajax({
             data: data,
             type: "post",
             url: "processing.php",
             success: function()
             {
                 hideLoading();
                 alert("success");
             },
             error: function()
              {
                  hideLoading();
                  alert("save failed");
              }
            });
     });

CSS:

.loader {
position: fixed;
right: 2%;
bottom: 0%;
width: 15vmin;
visibility: hidden;
}

任何帮助都会很棒! :)

Answer 1

您可以在 JS 中添加 1 秒的超时 - 在隐藏加载器之前。请看下面的代码:

setTimeout(function () {
        hideLoading();
    }, 1000);