CODEWITHSUNDEEP
javascriptjquerydelay
henryaaron
henryaaron

Reputation: 6192

Delay a link click

Here's the fiddle I'm working with: http://jsfiddle.net/Scd9b/

How can I delay the href function after the click?

For example a user clicks on the link, the message slides down One moment... and after 2 seconds the user continues to the page its linked to.

Sorry everybody forgot to mention there are some anchors that are not linked.

Upvotes: 4

Views: 19205

Answers (8)

gilly3
gilly3

Reputation: 91497

2024 edit, Vanilla JS:

for (const link of document.links) {
    link.addEventListener("click", e => {
        e.preventDefault();
        setTimeout(() => location.href = link.href, 2000);
    });
}

Original 2012 answer:

This should do it:

$("a[href]").click(function () {
    var url = this.href;
    setTimeout(function () {
        location.href = url;
    }, 2000);
    return false;
});

Upvotes: 1

lasrtb
lasrtb

Reputation: 1

Setting window location didn't sound like a good idea to me, So here's what I did

On click it checks whether the user clicked the link if yes it waits 2 seconds then triggers the click again and since it's not user-triggered it doesn't wait this time 

document.getElementById("question").addEventListener("click", function(e) {

 //if user clicked prevent default and trigger after 2 seconds
 if(e.isTrusted) {
 	e.preventDefault();
  
  //after 2 seconds click it and it'll not wait since it's not user triggered 
  setTimeout(function() {
     e.target.click();
  }, 2000);
 }
});
<a href="https://www.bing.com" id="question">Bing</a>

Upvotes: 0

Chris Cherry
Chris Cherry

Reputation: 28554

You can simulate navigating to a page by settings window.location. So we will block the normal function of the link with preventDefault and then in a setTimeout, we will set the correct window.location:

https://codepen.io/anon/pen/PePLbv

$("a.question[href]").click(function(e){
    e.preventDefault();
    if (this.href) {
        var target = this.href;
        setTimeout(function(){
            window.location = target;
        }, 2000);
    }
});

Upvotes: 8

Patrick Evans
Patrick Evans

Reputation: 42736

$(document).ready(function(){

    $("span.answer").hide();

    $("a.question").click(function(e){
        e.preventDefault();
        $(this).toggleClass("active").next().slideToggle("slow");
        var Link = $(this).attr("href");
        setTimeout(function()
        {
             window.location.href = Link;
        },2000);
    });

});

Upvotes: 1

techfoobar
techfoobar

Reputation: 66663

Check this fiddle: http://jsfiddle.net/C87wM/1/

Modify your toggle like this:

$("a.question[href]").click(function(){
    var self = $(this);
    self.toggleClass("active").next().slideToggle(2000, function() {
        window.location.href = self.attr('href'); // go to href after the slide animation completes
    });
    return false; // And also make sure you return false from your click handler.
});

Upvotes: 6

epascarello
epascarello

Reputation: 207511

Cancel the click and use setTimeout to change the location.

$(document).ready(function(){

    $("span.answer").hide();

    $("a.question").click(function(e){
        $(this).toggleClass("active").next().slideToggle("slow");
        e.preventDefault();
        var loc = this.href;
        if(loc){
            window.setTimeout( function(){ window.location.href=loc; }, 2000 );
        }
    });

});

Upvotes: 1

davidethell
davidethell

Reputation: 12018

How about e.preventDefault in your click handler. Then do a setTimeout that takes you to your destination?

$("a.question").click(function(e){
    e.preventDefault();
    $(this).toggleClass("active").next().slideToggle("slow");
    setTimeout('window.location.href=' + $(this).attr(href), 2000);
});

Upvotes: 0

Purag
Purag

Reputation: 17061

Prevent the default action of the link, first of all. Then add a timeout of 2 seconds, after which the page is redirected to the url found in the href attribute of the link.

$("a.question").click(function(e){
    e.preventDefault();
    $(this).toggleClass("active").next().slideToggle("slow");
    setTimeout(function(){
        location.href = $(this).prop("href");
    }, 2000);
});

Example.

Upvotes: 0

Related Questions