Переход на следующую страницу через определенное время JQuery

Question

Я пытаюсь переместить его на другую страницу, если проверка правильна, и вращение показывает, но переход быстрый, вращение выглядит не правильно.Как я могу держать вращение в течение 3 секунд и переместить его на следующую страницу?

   <a type="submit" href="next-to" class="btn submit">
      Next page
      <span class="fa fa-rocket"></span>
    </a>

В JQuery, если проверка правильна, он добавит класс загрузчика в спин, чтобы он загружался и перемещалсяэто к следующему.

  if (validate()) {
    $('.fa').addClass('loader'); <!-- showing the loading at least 3 seconds
  }

Answer 1

Есть два способа, которые вы можете использовать, как показано ниже

Метод 1:

function fnshowLoader(obj) {
  this.event.preventDefault();
  if (true) {     //If true return by validate() function
    $('.fa').addClass('loader');

    var url = obj.getAttribute("href"); // store anchor href
    setTimeout(function() {
      window.location = url;
    }, 2000);
  }

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a type="submit" href="next-to" class="btn submit" onclick="fnshowLoader(this)"> 
      Next page
      <span class="fa fa-rocket"></span>
    </a>

Метод 2:

$(document).ready(function() {

  $('.nextPressed').click(function(e) {
    e.preventDefault()
    if (true) { // If true return by validate() method
      $('.fa').addClass('loader');
      var url = this.href;
      setTimeout(function() {
        window.location = url;
      }, 2000);
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a type="submit" href="next-to" class="btn submit nextPressed"> 
      Next page
      <span class="fa fa-rocket"></span>
    </a>

Answer 2

Используйте setTimeout примерно так:

if (validate()) {
  $('.fa').addClass('loader'); <!-- showing the loading at least 3 seconds

  setTimeout(function() {
    return;
  }, 5000);
}

Также не рекомендуется использовать класс "fa", так как он добавит класс "loader" ко всем элементам с классом "fa".Лучше было бы $('.submit.fa-rocket')