Javascript 在按键时启动加载程序并在绘制 SVG 时停止

Question

我有一个加载器动画，我想在等待绘制函数完成时显示它。但是，目前加载程序未显示，SVG 会立即绘制(等待几秒钟后)。如果我在页面加载而不是按键时运行类似的加载程序代码。

        .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 内容时运行，因为这再次需要绘制循环才能发生。