Question

I have this very simple jQuery function:

$(".milestone-in-tree").live({
    mouseenter: function() {
        setTimeout(
        $.ajax({
            type: "GET",
            url:"/projects/pmnodes/" + $(this).data("pmnode") + "/addbuttons.js"
        }),5000)
    },
    mouseleave: function() {
        $(".grid-btn").delay(800).remove();
    }
});

I want to make it wait 5 secs before sending the AJAX request to the server but it doesn’t wait, it just sends it right away. Why?

UPDATE:

Thank you for all the feedbacks. I changed the function as it is suggested in all the answers:

$(".milestone-in-tree").live({
    mouseenter: function() {
        var node = $(this).data("pmnode")
        setTimeout(function() {
        $.ajax({
            type: "GET",
            url:"/projects/pmnodes/" + node + "/addbuttons.js"
        }),5000});
    },
    mouseleave: function() {
        $(".grid-btn").delay(800).remove();
    }
});

But I still get no delay. Is there something I misunderstood?
PS: I created the node variable because, for a reason I ignore, $(this) is not accessible anymore inside the SetTimeout anonymous function.

UPDATE 2

Finally, I could manage to get the delay but I realized that the request was still sent to the server after the delay, even if the mouseleave event had been triggered in between…

I could find a workaround. It is totally different. The delay doesn’t work anymore but the ajax requests are aborted on mouseleave events, which is what I really needed. For the ones who might be interested, this is the code:

var button_request;
$(".milestone-in-tree").live({
    mouseover: function() {
        var node = $(this).data("pmnode");
        button_request = $.ajax({
                        type: "GET",
                        url:"/projects/pmnodes/" + node + "/addbuttons.js"
                    });
        setTimeout(function() {button_request;},5000)
    },
    mouseleave: function() {
        if (button_request) {
            button_request.abort();
            button_request = null;
                }
        $(".grid-btn").remove();
    }
});

Of course the setTimeout could be removed (as it doesn’t work…) but I leave it for clarity.

Thanks everyone.

Answer 1

Try this:

$(".milestone-in-tree").live({
    mouseenter: function() {
        var pmnode = $(this).data("pmnode"); // cache the data in a variable
        setTimeout( function() { // this function(){...} wrapper is necessary
            $.ajax({
                type: "GET",
                url:"/projects/pmnodes/" + pmnode + "/addbuttons.js"
            })
        },5000)
    },
...

The first argument of a setTimeout() call needs to be either a string (which you really, really shouldn’t do) or a self-contained function object.

By putting $.ajax(...) there instead, you’re telling JavaScript to (1) run it immediately and (2) set the first argument as whatever the ajax function returns — which, according to the docs, is a jqXHR object which setTimeout can’t do anything with.

Just get in the habit of putting an anonymous function(){...} as the first argument of setTimeout() or setInterval() every time you use it, and you’ll be fine.