Question

with the follow code:

$('someelement').hover(
    function() {
        console.log('mouseenter begin');
        setTimeout(function() {
            console.log('mouseenter ends');
        }, 2000);
    },
    function() {
        console.log('mouseleave begin');
        setTimeout(function() {
            console.log('mouseleave ends');
        }, 2000);
    }
)

If I enter and leave div at some times (or one time less then 2 seconds) my console get:

mouseenter begin
mouseleave begin
mouseenter ends
mouseleave ends

I want mouseleave only executed when mouseenter ends, but don’t know how.

mouseenter begin
mouseenter ends
mouseleave begin
mouseleave ends

Answer 1

You could create a queue…

http://jsfiddle.net/FHPGS/

var queue = []

$('someelement').hover(
    function() {
        queue.push('mouseenter begin');
        setTimeout(function() {
            var item = queue.shift();
            if (item)
                console.log(item)
            console.log('mouseenter ends');
        }, 2000);
    },
    function() {
        queue.push('mouseleave begin');
        setTimeout(function() {
            var item = queue.shift();
            if (item)
                console.log(item)
            console.log('mouseleave ends');
        }, 2000);
    }
)