如何在 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);
});
旁注:您的代码延迟只有一秒,而不是两秒。
我想这很简单,但我的语法无法正常工作。
我创建了一个显示带有用户信息的弹出框的函数,称为 '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);
});
旁注:您的代码延迟只有一秒,而不是两秒。