Delay following link in jQuery

Question

Because I want to display a short animation when a user clicks a link, I want to make sure that the animation is complete before redirecting. To do so, I thought I could set a simple time out to follow the link, like so:

$("a[href^='http://'], a[href^='https://']").click(function(e) {
    setTimeout(function() {
        window.location.href = $(this).attr("href");
    }, 1200);
    console.log($(this).attr("href"));
    e.preventDefault();
});

Apparently, it doesn't. Though I don't understand why. The console.log isn't called, but I'm pretty sure my selector is correct. What am I missing here?

Fiddle.

looks to be an issue with jQuery edge - http://jsfiddle.net/arunpjohny/wcc989jk/1/ - edge is throwing an error like `Uncaught TypeError: url.indexOf is not a function` — Arun P Johny, May 23 '15 at 12:02

score 1 · Accepted Answer · answered May 23 '15 at 12:07

It is looking like a bug in the load method in jQuery edge, if you see the below code it is calling off = url.indexOf(" "), but when $(window).load(function(){}) the value of url is a function which does not have the indexOf property.

jQuery.fn.load = function( url, params, callback ) {
    if ( typeof url !== "string" && _load ) {
        return _load.apply( this, arguments );
    }

    var selector, type, response,
        self = this,
        off = url.indexOf(" ");

    if ( off > -1 ) {
        selector = jQuery.trim( url.slice( off ) );
        url = url.slice( 0, off );
    }

    // If it's a function
    if ( jQuery.isFunction( params ) ) {

        // We assume that it's the callback
        callback = params;
        params = undefined;

    // Otherwise, build a param string
    } else if ( params && typeof params === "object" ) {
        type = "POST";
    }

In the jsfiddle you can see an error like Uncaught TypeError: url.indexOf is not a function. It is because by default jQuery adds the script in a dom ready handler. If you change the script location to head/body then use dom ready handler as given below it is working fine

jQuery(function($){
    $("a[href^='http://'], a[href^='https://']").click(function(e) {
        setTimeout(function() {
            window.location.href = $(this).attr("href");
        }, 1200);
        console.log($(this).attr("href"));
        e.preventDefault();
    });
})

Demo: Fiddle

Ya, jQuery edge should be used only for experimental purpose (?!). There are many bugs, for example: http://jsfiddle.net/b1wa99xz/ — A. Wolff, May 23 '15 at 12:33
I wondered about that. What is this `edge`? I assumed it was the latest stable build? Also, for some reason I can't seem to run my function. For instance, opening a new window doesn't work. Is this due to JSFiddle's restrictions, or am I doing something wrong? Link: http://jsfiddle.net/BramVanroy/wcc989jk/3/ — Bram Vanroy, May 23 '15 at 12:37
@BramVanroy http://stackoverflow.com/questions/7035328/what-is-jquery-edge-in-jsfiddle-net - it is nightly build so may not be a stable one — Arun P Johny, May 23 '15 at 12:41
@BramVanroy for me the popup blocked message is coming.... it is a browser feature — Arun P Johny, May 23 '15 at 12:42
Ah, should've googled it. My bad. Thanks. And o darn it, I suppose that that means I can't use my technique because browsers will simply block it. `:-(`. — Bram Vanroy, May 23 '15 at 12:44

Delay following link in jQuery

1 Answers1