javascript - 仅当 mouseenter 结束时才离开

Question

使用以下代码：

$('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);
    }
)

如果我有时（或不到 2 秒）进入和离开 div，我的控制台会得到：

mouseenter begin
mouseleave begin
mouseenter ends
mouseleave ends

我希望 mouseleave 仅在mouseenter结束时执行，但不知道如何。

mouseenter begin
mouseenter ends
mouseleave begin
mouseleave ends

Answer 1

你可以创建一个队列...

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