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