setTimeOut to delay load of href from url in html - Not working

Question

I have a link on all pages and every time the user clicks it I want to delay the next page load from the href with the <a> tag. I have tried to grab the link in the <a> tag in the HTML then tried to delay it but the timeout won't work. Can anyone kindly help?

var link = document.querySelector('a').getAttribute('href')

setTimeout(function() {
  location.href = link
}, 4000);

Answer 1

This will help you I believe:

const a = document.querySelector('a');

a.addEventListener("click", (e) => {
  e.preventDefault();
  const link = e.target.href;

  setTimeout(() => {
    window.open(link)
  }, 1000)
})

Working example on jsfiddle

Answer 2

 if ( document.getElementById('primaryCTA') != null) {
var primaryCTA = document.getElementById("primaryCTA").onclick = showSpinner;

function showSpinner() { 
var spin = document.getElementById("tick-animation-small");
if(spin.style.display == 'inline-flex')
spin.style.display = 'none';
else
spin.style.display = 'inline-flex';

var  saving = document.getElementById("mini-spinner-copy"); 
if(saving.innerHTML ==  "Continue" )
    saving.innerHTML = "Saving progress"; 
else
    saving.innerHTML ==  "Continue";
  
    var element = document.getElementById("mini-spinner-copy");
    element.classList.add("fadeIn");     
  
 

 const a = document.querySelector('a');

 a.addEventListener("click", (e) => {
   e.preventDefault();
   const link = e.target.href;

   setTimeout(() => {
      window.open(link)
   }, 3000)
 })
 
  
};

}