jquery 使用多个 setTimeouts
jquery using multiple setTimeouts
本文关键字:setTimeouts jquery 更新时间:2023-09-26
我目前正在创建一个包含一些动态内容的网站,以便每当用户将鼠标悬停在标签上时,标签都会展开以显示更多信息,然后在特定时间后标签将再次折叠,除非用户再次将鼠标悬停在标签上,在这种情况下超时将重置。我已经开发了代码来为 1 个标签执行此操作,但我现在要开发它以针对多个标签执行此操作。
我遇到的问题是我正在全局定义计时器的变量,以便它可以用于两个事件,但是当我有多个标签时,这将不起作用。
我想不出如何为多个标签实现这一目标,有人知道我该怎么做吗?
这是我到目前为止的代码...
var timer;
$('.label').mouseenter(function(){
clearTimeout(timer);
$('#' + this.id + ' div').slideDown('slow');
});
$('.label').mouseleave(function(){
var temp = $('#' + this.id + ' div');
timer = setTimeout(function() {
temp.stop().slideUp('slow');
}, 2000);
});
提前感谢任何帮助。
您可以维护一个计时器数组,例如
var timer = [];
$('.label').mouseenter(function(){
clearTimeout(timer[$(this).index()]);
$('#' + this.id + ' div').slideDown('slow');
});
$('.label').mouseleave(function(){
var temp = $('#' + this.id + ' div');
timer[$(this).index()] = setTimeout(function() {
temp.stop().slideUp('slow');
}, 2000);
});
您还可以.hover
使用诸如
var timer = [];
$('.label').hover(function(){
clearTimeout(timer[$(this).index()]);
$('#' + this.id + ' div').slideDown('slow');
},function(){
var temp = $('#' + this.id + ' div');
timer[$(this).index()] = setTimeout(function() {
temp.stop().slideUp('slow');
}, 2000);
});
为什么不使用hover
:
$('.label').hover(function(){
$('#' + this.id + ' div').slideDown('slow');
},
function(){
$('#' + this.id + ' div').slideUp('slow');
})
这样,当标签悬停在标签上时,将显示更多信息,当鼠标离开它们时,它们将再次隐藏。
要hover
的第一个参数用于鼠标输入,而第二个参数用于鼠标离开。
更多信息:
http://api.jquery.com/hover/
您可以使用 jQuery 的 .data()
方法,而不是使用全局变量timer
,如下所示:
$('.label').hover(function(){
clearTimeout($(this).data('hover_timeout'));
$('#' + this.id + ' div').slideDown('slow');
},function(){
var temp = $('#' + this.id + ' div');
$(this).data('hover_timeout', setTimeout(function() {
temp.stop().slideUp('slow');
}, 2000));
});
jQuery.data() 文档
相关文章:
- 无法从 jQuery RSS Feed 中的 localStorage 动态替换类
- 如何使用jQuery自动打开页面上的所有链接
- 如何使用jquery在填充自动完成的值后使文本框只读
- jQuery:循环一个具有不同超时值的循环
- 用程序搜索JQuery数据表中的文本
- 使用 jQuery 的 .on 函数如何获取事件的原始元素
- jQuery匹配JSON对象的部分文本
- Jquery POST未填充数组
- JQuery使计数器每次更改时都会增加
- 如何在Angular2中使用jQuery插件
- 提高JQuery的性能
- 无法在通过jQuery的ajax加载的页面中执行javascript
- JQuery合并了keyup和focusout两个函数
- 如何使用jQuery选择下拉列表的值
- 将PHP变量传递给jQuery时遇到问题
- jQuery UI自动完成突然停止工作
- 剑道网格jQuery动画()问题
- 如何使jQuery插件函数可调用以供独立使用,而不在集合上操作
- jQuery Promises with chained setTimeouts
- jquery 使用多个 setTimeouts