jquery - クリック-ナビゲートする前に遅延

Question

コードを作成する簡単な方法はありますか？URLが変更されたり、リンクをクリックした場合は、divを表示し（gifを3秒ロードするなど）、ページを表示しますか？GIFを3秒間スピンして、ページを表示する空白の白いページのようなものですか？

ありがとう！

Answer 1

与えられた<a class="waitBeforeNavigate" href="somewhere.html">Go somewhere</a>

function waitBeforeNavigate(ev) {
  ev.preventDefault();                    // prevent default anchor behavior
  const goTo = this.getAttribute("href"); // store anchor href

  // do something while timeOut ticks ... 

  setTimeout(function(){
    window.location = goTo;
  }, 3000);                               // time in ms
}); 

document.querySelectorAll(".waitBeforeNavigate")
  .forEach(EL => EL.addEventListener("click", waitBeforeNavigate));

jQueryの使用：

$('.waitBeforeNavigate').on("click", function (ev) {
  ev.preventDefault();                // prevent default anchor behavior
  const goTo = $(this).attr("href");  // store anchor href
       
  // do something while timeOut ticks ... 
       
  setTimeout(function(){
    window.location = goTo;
  }, 3000);                           // time in ms
});