javascript - 鼠标移出时淡出，除非在设定时间内鼠标悬停

Question

我正在寻找以下问题的解决方案: 鼠标悬停时，div 会淡入。鼠标移开时，它会再次淡出。简单而且可行，但我想设置一个条件，即仅当鼠标悬停在设定时间内(例如 2 秒)内不再发生时才会发生淡出。简单的delay()不起作用，因为无论如何它都会发生...是否有一种方法可以设置某种计时器来取消函数在这段时间内触发的函数运行？

Answer 1

$('#foo').hover(function() {
    var $bar = $('#bar');
    clearTimeout($bar.data('fadeOutTimer'));
    $bar.fadeIn();
}, function() {
    var $bar = $('#bar');
    $bar.data('fadeOutTimer', setTimeout(function() {
        $bar.fadeOut();
    }, 3000));
});

演示:http://jsfiddle.net/5oLcfzj1/