Question

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

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

红色元素正在运行（他使用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( { ...

我想得到＆＃34;这个＆＃34;相对于目标HTML对象，但暂时它是在记录窗口而不是对象。

我在这里的文档中尝试过：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);

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

1 个答案: