Delaying click event

Question

I'm wondering whether there's a simple way to delay the click event from being processed for a specified period of time. For example we could have

$('#someElement').on('click', 'a', function(event) {
    var duration = 1000;
    someAsynchronousFunction(); // Start as soon as click occurs
    ... // Code to delay page transition from taking place for duration specified
});

So in this case the asynchronous function would be guaranteed some amount of time to run. If it hasn't completed it's work in this time I wouldn't care and would just like to continue with the page transition. I know that it's possible to accomplish something close with

event.preventDefault();
...
setTimeout(function(){
    window.location = $(this).attr('href');
}, duration);

But this only works when the link being clicked goes to a full page. I want to be able to deal with links that are used for ajax calls (which don't change the url) as well.

I noticed that the mixpanel library has a function track_links which seems to accomplish the delay on the page transition, though that function doesn't seem to work well with the support for ajax links that I mentioned.

Any help would be great! Thanks.

Edit: So I suppose my question wasn't exactly clear, so I'll try to provide some more details below.

I don't care if the async function finishes running! I only want to give it the guarantee that it has some set amount of time to execute, after which I don't care if it finishes, and would prefer to go ahead with the page transition.

i.e. I want to delay not the start of the async function, but the start of the page transition. The async function would start running as soon as the click occured.

Hopefully this is a bit more clear!

Answer 1

So in the end I figured out a way to solve the problem I posed, and I'm providing it here in case anyone else has the same problem and is looking for a solution.

var secondClick = false;
var duration = 1000;

$('#someElement').on('click', 'a', function(event) {
    var that = $(this);

    if(!secondClick) {
        event.stopPropagation();
        setTimeout(function(){
            secondClick = true;
            that.click();
        }, duration);

        someAsynchronousFunction();
    } else {
        secondClick = false;
    }
}

Basically when the user clicks the link, it internally prevents that click from actually having any effect, and gives the asynchronous function a set amount of time to do it's work before doing a second click on the link which behaves normally.