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

Question

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

我创建了一个显示带有用户信息的弹出框的函数，称为 '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 但也没有用。

任何人都可以帮助我吗？

Answer 1

这一行：

$('.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);
});

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

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

How to call custom function on hover with delay in jquery

jquery

function

jquery-hover