如何在 jquery 中延迟悬停时调用自定义函数

How to call custom function on hover with delay in jquery

我想这很简单,但我的语法无法正常工作。

我创建了一个显示带有用户信息的弹出框的函数,称为 'displayUserinfo'(其中有很多代码,所以我想没有必要将其粘贴进去)。当用户点击 $('.avatar') 类时,函数启动:

$('.avatar').on('click', displayUserinfo);

这部分工作得很好。现在我想添加代码,当用户将鼠标悬停在 $('.avatar') 上 2 秒时将启动相同的功能,但那是功能未启动的地方(console.logs 在那里测试它是否工作并且它们都做):

var timer;
var delay = 2000;

$('.avatar').hover(function() {
    console.log('test1');
    timer = setTimeout(function() {
        console.log('test2');
        $('.avatar').displayUserinfo;
    }, delay);
}, function() {
    clearTimeout(timer);
    console.log('test3');
});

我尝试了 $(this).displayUserinfo 但也没有用。

任何人都可以帮助我吗?

这一行:

$('.avatar').displayUserinfo;

...查找具有 avatar class 的任何元素并将它们包装在 jQuery 对象中,然后访问 displayUserinfo 属性 jQuery 对象(可能是 undefined)——然后什么也不做。例如,它不会调用函数($() 除外)。

我想你可能想要:

var hovered = this;

就在 hover 回调中,然后在 setTimeout 回调中:

displayUserinfo.call(hovered);

调用 displayUserinfo 函数,使用在调用期间悬停为 this 的元素(on 的方式)。

现场:

var timer;
var delay = 1000;

$('.avatar').hover(function() {
    var hovered = this;
    timer = setTimeout(function() {
        console.log('test2');
        displayUserinfo.call(hovered);
    }, delay);
}, function() {
    clearTimeout(timer);
});

旁注:您的代码延迟只有一秒,而不是两秒。