javascript - jquery 这不适用于 settimeout，bug？

Question

所以我试图做一些动态悬停操作，这需要在jquery中使用this。由于某种我无法弄清楚的原因，javascript setTimeout 函数似乎不支持它。

我知道setTimeout函数不是Jquery，但是如果放在Jquery函数中，它不是应该能够响应相关的this吗？

这里是一些示例代码:

var go = false;
var t;
$('.box').mouseenter(function(){
    t = setTimeout(function(){
        go = true;
        alert($('span',this).text());
    },1000);
});
$('.box').mouseleave(function(){
    clearTimeout(t);
    if(go){
        alert($('span',this).text());
    }
});

悬停 1 秒时，它会发出空白警报，但在 mouseleave 上，它会发出正确的文本警报，即使这两个警报都位于具有相同选择器的 Jquery 函数内。

为什么会发生这种情况以及如何解决它？

jsfiddle

Answer 1

由于 setTimeout() 的回调是与主线程分开执行的，因此回调的执行上下文会有所不同，因此回调中的 this 不会指向与 setTimeout 外部相同的对象，在本例中为 hovered .box 元素。

这里一个可能的解决方案是使用 $.proxy()方法为回调方法传递自定义执行上下文

 $('.box').mouseenter(function(){
    t = setTimeout($.proxy(function(){
        go = true;
        alert($('span',this).text());
    }, this),1000);
 });

演示:Fiddle

另一种解决方案是使用闭包变量

$('.box').mouseenter(function(){
    var self = this;
    t = setTimeout(function(){
        go = true;
        alert($('span', self ).text());
    },1000);
});

演示:Fiddle