Javascript запускает загрузчик при нажатии клавиши и останавливается при рисовании SVG

#javascript #jquery #html #css

#javascript #jquery #HTML #css

Вопрос:

У меня есть анимация загрузчика, которую я хочу показать в ожидании завершения функции рисования. Однако в настоящее время загрузчик не отображается, и 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>

1. При нажатии клавиши вы не вызываете $(".loader").show() … вы вызываете hide до и после.

2. @trincot о, я только что понял, что неправильно ввел код в stackoverflow, я только что отредактировал его. В моем исходном коде это был $ («.loader»).show(), но он все еще не отображается..

3. drawSVG3 Выполняет ли какое-либо асинхронное выполнение? Или это синхронно? Я полагаю, что это последнее. Вы можете подтвердить?

Ответ №1:

Если drawSVG3 создает svg содержимое синхронно с помощью обычного DOM API, то загрузчик никогда не будет отображаться, поскольку следующий paint выполняется после завершения выполнения кода. К тому времени обратный вызов с заданным интервалом будет выполнен немедленно и загрузчик снова скроется.

Вы могли бы отложить вызов drawSVG с setTimeout помощью, чтобы мог произойти цикл рисования (показывающий загрузчик) до начала работы:

 if (keyPress) {
    $(".loader").show();

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

Однако имейте в виду, что анимация загрузчика не будет выполняться во время рисования содержимого SVG, поскольку для этого снова требуются циклы рисования.