CODEWITHSUNDEEP
javascriptjquery
Gabriel Santos
Gabriel Santos

Reputation: 4974

Mouseleave only when mouseenter ends

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

Upvotes: 1

Views: 166

Answers (1)

user1106925
user1106925

Reputation:

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);
    }
)

Upvotes: 2

Related Questions