获取自定义事件的“this”参考

Question

我正在尝试将 JS 工作代码转换为 jQuery 代码，但几个小时后我就失败了。 有一个 JsFiddle 用于：

http://jsfiddle.net/TyrionGraphiste/otx1hx7h/

红色的 one 元素正在工作（他正在使用 JS 代码）。

还有JS代码：

var hoverIntent = function (element, handler, minDuration, callback, duration) {
        
    var timeout = null;
        
    element.on( "mouseover", function () {
        timeout = setTimeout(handler, minDuration);
    } );
        
    element.on( "mouseout", function () {
        var clear = function () {
            clearTimeout( timeout );
       };
            
        setTimeout( function () {
            callback(), clear();
        }, duration );
            
        clear();
    } );
};
    
/* Test */

var element = $( "#element" );
    
hoverIntent(element, function() {

$( element ).animate( {
    height: "80px"}, 200 );
}, 1000, function () {
    $( element ).animate( {height: "50px"}, 200 );
}, 1000 );

这里是 jQuery 代码：

/* jQuery Event */
    
    $( "body > div.test" ).on( "hoverDuration", function ( e, options ) {
        var
            handler = options.handler,
            minDuration = options.minDuration || 0,
            callback = options.callback,
            duration = options.duration || 0,
            timeout = null,
            clear;
            
            console.log(options);
        
            $( this ).on( {
                mouseover: function () {
                    timeout = setTimeout(handler, minDuration);
                },
                mouseout: function () {
                    clear = function () {
                        clearTimeout( timeout );
                    };
                    
                    setTimeout( function () {
                        callback(), clear();
                    }, duration );
                    
                    clear();
                }
            } );
    } );
    
    $( "body > div.test" ).hoverDuration( {
        handler: function() {
            console.log( $(this) );
            $( this ).animate( {
                height: "80px"
            }, 200 );
        },
        minDuration: 1000,
        callback: function () {
            $( this ).animate( {
                height: "50px"
            }, 200 );
        },
        duration: 1000
    } );

在这一行的 jQuery 代码中：

...
handler: function() {
    console.log( $(this) ); // this one
$( this ).animate( { ...

我想获取与目标 HTML 对象相关的“this”，但目前它记录的是窗口而不是对象。

我也尝试过这里的文档：https://learn.jquery.com/events/introduction-to-custom-events/

但没办法..有人可以帮助我吗？

Answer 1

setTimeout 回调在全局对象上下文中调用。您需要提供元素上下文。一种方法是使用Function.prototype.bind 或在jQuery 中你可以使用$.proxy 函数：

mouseover: function () {
    timeout = setTimeout($.proxy(handler, this), minDuration);
},

如果你不支持IE8，那么setTimeout(handler.bind(this), minDuration);