JavaScript启动加载程序在键盘上，并在绘制SVG时停止

Question

我有一个我想在等待绘制功能完成时要显示的加载程序动画。但是，目前尚未显示加载器，并且SVG立即绘制（等待几秒钟后）。如果我放入pageload，但不在键盘上。

        .loader {
            position: relative;
            left: calc(50% - 25px);
            top: calc(50% - 25px);
            align-content: center;
            border: 5px solid #f3f3f3;
            /* Light grey */
            border-top: 5px solid #3498db;
            /* Blue */
            border-radius: 50%;
            width: 50px;
            height: 50px;
            -webkit-animation: spin 1s linear infinite;
            /* Safari */
            animation: spin 1s linear infinite;
        }

if (keyPress) {
  $(".loader").show();
  setInterval(function() {
    if ($("#SVG3").length > 0) {
      $(".loader").hide();
    }
  })
  //function to insert SVG3 into graphPanel
  drawSVG3()
}

    <div id="graphPanel">
      <div class="loader" style="display: none;"></div>
    </div>

Answer 1

如果drawSVG3通过通常的DOM API同步创建svg内容，则将永远不会显示加载程序，因为在代码运行到完成后执行下一个油漆。到那时，设置间隔回调将立即执行并再次隐藏加载程序。

您可以使用setTimeout将呼叫延迟到drawSVG，以便在工作开始之前可能发生油漆周期（显示加载程序）：

if (keyPress) {
    $(".loader").show();
    setTimeout(function() {
        //function to insert SVG3 into graphPanel
        drawSVG3();
        $(".loader").hide();
    })
}

请注意，在绘制SVG内容时，装载机动画将不会运行，因为这再次需要油漆循环。