jsfiddle

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秒时，它会提醒空白，但在鼠标左键上它会提醒正确的文本，即使两个警报都在具有相同选择器的Jquery函数内。

为什么会发生这种情况，我该如何解决？

jsfiddle

Answer 1

由于回调到setTimeout()是与主线程分开执行的，因此回调的执行上下文会有所不同，因此回调中的this不会指向与setTimeout之外的对象相同的对象{1}}，在本例中为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

Answer 2

你可以在某处保存这个值：

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

你必须这样做的原因是＆＃39;这个＆＃39;每当调用一个新函数时，它都会获得一个新值。因此，当计时器的东西调用你的内部功能时，这个＆＃39;与鼠标调用外部函数时的情况不同。

从技术上讲，＆＃39;这个＆＃39;被称为执行上下文。

上面的代码所做的是在调用外部函数时创建的闭包内创建一个变量。我们存储了这个＆＃39;在该变量中，＆＃39; elem＆＃39;，并在以后发生超时时使用它。

jquery这不用于settimeout，bug？

jsfiddle

2 个答案: