How to make a Href link wait

Question

I want to make a Clickable button, which waits 10 seconds to load the linked page. I was wondering if it also needs Href for it ? If anyone know's how please help me out.

Answer 1

As you have tagged Javascript and not jQuery....

Something like

JavaScript:

function loadUrl(){
  window.location.href = "http://www.google.com";
}

Link:

<a href="JavaScript:setTimeout(loadUrl,10000)">Click My Link</a>

OR

JavaScript:

function delayUrlLoad(url, mils)
{
    setTimeout(function() {
        window.location.href = url;
    }, mils)
}

Link:

<a href="#" onclick="delayUrlLoad('http://www.google.com/', 10000);return false;"> Click Here </a>

Answer 2

How about?

HTML:

    <button id="yourbutton" href="https://www.google.com">
        Click Me
    </button>

jQuery/JS:

$( "#yourbutton" ).on( "click", function(event) {
  var url = $(this).attr('href');
  setTimeout("loadPage(url)", 10000);
  event.preventDefault();
});

function loadPage(url){
  window.location.href = url;
}

FIDDLE (it wont load the new page in JSFiddle as it is sandboxed, but if you check console, it is indeed attempting to load the page after the timeout).

Answer 3

You'll need to include jQuery to run this code, but this is the idea

<a href="http://www.url.com">Click Me</a>
$("a").on("click", function (event) {
  event.preventDefault();
  var timeout = setTimeout(function () {
    var url = $(this).attr("href");
    location.replace(url);
  }, 10000);
});

Answer 4

This way:

HTML

<span id="link" data-href="http://www.google.it">click here</span>

JS

$('#link').on('click', function() {
    setTimeout(function() {
        location.href = $('#link').attr('data-href');
    }, 10000);
});