使用悬停在带有setTimeout的链接上更改图像

Question

我正在设计一个大型菜单，并希望根据正在悬停的链接更新div内的图像。我要做的是等待代码的 mouseleave 部分，这样如果用户立即移动到下一个 LI 标记， mouseleave < / strong>部分代码未执行。但如果用户 mouseenter 其他 LI 2秒钟，则会执行此 mouseleave 代码。

问题是＃1返回值正常，但＃2给出'undefined'值。为什么这样，我该如何解决？如何在setTimeout函数中获取当前LI的attr？因为一旦我有了价值，我就可以进行比较来控制流量。非常感谢。

// FADE IN THE IMAGE ACCORDING TO THE MENU ITEM
// HTML=<li><a data-pos="left -256px" href="somelink">Link A</a></li>
var $sprite = $('#photo');

    $('li>a').hover(
        function() {
            sprite_pos=$(this).attr('data-pos');        // fetch value for the tag
            // Put an if otherwise this code gets executes for all li>a creating an unnecessary fade-in out effect
            if(typeof(sprite_pos)  != "undefined") {
                $sprite.fadeTo(200, 0, function() {
                $sprite.css("background-position",sprite_pos); });
                $sprite.fadeTo(200, 1);
            }
        },
        function() {

            //sprite_pos=$(this).attr('data-pos');          // #1

            setTimeout( function() {
                sprite_pos=$(this).attr('data-pos');        // #2 fetch value for the tag

            if(typeof(sprite_pos)  != "undefined" ) {
                $sprite.fadeTo(200, 0, function() {
                $sprite.css("background-position",default_pos); });
                $sprite.fadeTo(200, 1);
            }   // if(typeof(sprite_pos)  != "und ...
            }, 2000 );
        }

    );  // $('li>a').hover( ...

Answer 1

调用setTimeout时this成为window对象。要修复，只需创建对原始this上下文的引用：

function() {

    var me = this;

    setTimeout( function() {

        sprite_pos=$(me).attr('data-pos');        // #2 fetch value for the tag
        ///          ^^

        /// ... rest of code