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.

回答1:

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

回答2:

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

回答3:

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

});

回答4:

$(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);
    });

});

回答5:

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.

回答6:

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

回答7:

This should do it:

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

回答8:

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="http://www.bing.com" id="question">Bing</a>