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?

Solution 1

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

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

Solution 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);
    });
});

Comments

[VisioN]

What do you mean by "delay a link"?

[mxgr]

Do you mean a time delay that occurs when the user clicks on a link before the browser navigates to the linked page?

[Riju Mahna]

Please be more specific in the question. Most of it doesn't make much sense. Some example or snippet will be helpful

[ammonhra]

Yes, mxgr, that's exactly what I mean.

[ammonhra]

This is going to be a really dumb question, but where do I put this so that it affects a div?

[gurvinder372]

Ohh, in case this is for a div, then make it <div onclick="delay ('www.google.com')">Click here to go to google in half a second</div>

[ammonhra]

Oh wait, I just realized what to do. Thanks.

[Rune Vejen Petersen]

For this to work, you will need add evt.preventDefault(); in the beginning of your function.

[user2840467]

This works great for me - quick question: Should the () in setTimeout function() have the URL as a parameter too though?

[Berry M.]

This does not support target="_blank", or any other target setting.

[lolcatzftw]

This does not really answer the question. If you have a different question, you can ask it by clicking Ask Question. To get notified when this question gets new answers, you can follow this question. Once you have enough reputation, you can also add a bounty to draw more attention to this question. - From Review