从按钮加载微调器答案

【问题标题】：Loading A Spinner from a Button从按钮加载微调器
【发布时间】：2020-06-19 17:17:42
【问题描述】：

我试图在按下按钮后立即加载微调器。我正在使用 Spinkit 库。目的是在单击按钮后显示微调器约 3 秒，就在页面加载之前。但是在旋转器显示之前不需要一秒钟。请看：

  <!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="spinkit.min.css">
    <style>
        .example  {
            margin: 50px 100px;
            padding: 100px; 
            border-bottom: 1px solid #eee;
            display: none; 
                    }
         .sk-plane {
              height: 50px;
              background-color: darkviolet;
      }
    </style> 
    <script>


     function spp(){

         let spi = setInterval(spiny, 3000);
     };    
        spp();

      function spiny(){

         let showie = document.querySelector('.example');
          showie.style.display = 'block';

          };
        </script>

    </head>
<body>

    <button class='tay' onclick='spiny()'>
        <a href="#" > Press Here </a>          
      </button>



        <center class="example">
            <button class="sk-plane"> </button>
           </center>




</body>
</html>

这里是 Spinkit 文件的source

【问题讨论】：

标签： javascript html spinner

【解决方案1】：

setInterval(func|code, [delay]) 将在延迟结束后运行您的代码包括第一次。为了解决您的问题，我建议您在单击按钮时触发微调器功能，并在 X 时间后使用 setTimeout(func|code, [delay]) 停止它。 setTimeout 采用与 setInterval 相同的参数，但它会在延迟结束时运行一次函数/代码。你可以找到更多信息here。

【讨论】：

【解决方案2】：

如果 .example 是微调器容器的类，您只需在用户单击按钮时显示它并在 3 秒后将其隐藏：

function spiny(){
    let spinner = document.querySelector('.example');
    spinner.style.display = 'block';
    setTimeout(() => {
        spinner.style.display = 'none';
    }, 3000);
}

【讨论】：