I want to delay a link for a period of 500 with javascript

Question

I've been looking through the Stackoverflow questions, trying to get help with a simple link delay; I want to put it around a div, and I can't make heads or tails of the examples I've found.

So far, I understand that I need to halt the native function of href, but I don't know how to do that. The code is still very alien to me. Help?

Answer 1

Set your href attribute as href="javascript:delay('URL')" and JavaScript:

function delay (URL) {
    setTimeout( function() { window.location = URL }, 500 );
}

Answer 2

If you want to delay every link on your page, you can do it with jQuery like this

$(function(){
    $("a").click(function(evt){
        var link = $(this).attr("href");
        setTimeout(function() {
            window.location.href = link;
        }, 500);
    });
});

Answer 3

To delay a link with inline javascript, just set your href attribute as href="javascript:setTimeout(()=>{window.location = 'URL' },500);".

When you replace the URL with your link, just make sure it is inside the ' '.

<li class="nav-item">
  <a href="javascript:setTimeout(()=>{window.location = '#About' },500);">
    About Me
  </a>
</li>

Answer 4

I use this to keep the function waiting before continuing:

var wait_until = new Date().getTime() + 500;
while (new Date().getTime() < wait_until) {
    //Do nothing, wait
}