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

$(\'#someEle         


        

Answer 1

setTimeout allows you to delay running code by however many ms you want

setTimeout(function(){
    console.log('Stuff be done'); //This will be delayed for one second
}, 1000);

In reality, if you're dealing with ajax you want to respond when the ajax call is complete. It may take more or less than 1000ms. $.ajax allows you do this with the .done() method. This is an example from the docs:

$.ajax({
    url: "test.html",
    context: document.body
}).done(function() {
    $(this).addClass("done");
});

Answer 2

window.setTimeout will execute any given function after a specified delay.

You'd call it like this:

$('yourElement').click(function (event) {
    setTimeout(function () { console.log('hi'); }, 1000);
});

But I have to wonder why you need to do this. What's the problem you're trying to solve? Usually delaying stuff doesn't really solve anything.

Answer 3

jQuery's ajax functionality provides exactly what you are looking for. You can define a callback function to run after your ajax request.

Something like this:

$('#someElement').click(function(event){
    event.preventDefault();
    var loc = $(this).attr('href');
    $.ajax({
        url: "test.html",
        complete: function(){
            // Handle the complete event
            loc = $(this).attr('href');
            window.location.href = loc;
        }
    });
});

You may want to use ajaxStop instead of complete, it seems like your motivation for delaying navigation is because you have a bunch of asynchronous stuff going on and you want to make sure all your ajax stuff is complete before you navigate to that page.

Regardless I would recommend looking at http://api.jquery.com/Ajax_Events/ (a very useful page of documentation).

Answer 4

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.