Question

我认为它与嵌套函数有关，但它们需要这样。为什么不工作？我做了些蠢事吗？这是一个孤立的例子，我必须使用$(this)，所以我似乎必须嵌套函数？

HTML：

<div class="box"></div>
<ul>
<li>Hover box, it turns blue. Leave box, it turns red after 2 secs.</li>
    <li>If you hover back onto box before 2 secs is up, it's supposed to clear timer and keep box blue.</li>
    <li>It doesn't clear timer and after 2 secs the box still turns red. Why?</li>
</ul>

JavaScript的：

var t;

$('.box').on('mouseenter', function() {

    $thisBox = $(this);

    clearTimeout(t);

    $thisBox.addClass('blue');

    $thisBox.on('mouseleave', function() {

        t = setTimeout(function() { $thisBox.removeClass('blue'); }, 2000);

     })

});

JSFiddle： http://jsfiddle.net/ddbtZ/7/

感谢您寻找：）

Answer 1

http://jsfiddle.net/ddbtZ/3/

您的.on()不应该嵌套。实际上，每次将鼠标悬停在元素上时，都会附加一个新的处理程序。

编辑：根据问题澄清。

使用.one()代替.on()

http://jsfiddle.net/ddbtZ/8/

Answer 2

从mouseleave事件中移出mouseenter，它会起作用。

var t;

$('.box').on('mouseenter', function() {
    clearTimeout(t);
    $('.box').addClass('blue');
});

$('.box').on('mouseleave', function() {
    t = setTimeout(function() {
        $('.box').removeClass('blue');
    }, 2000);
});

DEMO： http://jsfiddle.net/ddbtZ/4/

clearTimeout无法在嵌套函数中工作

2 个答案: