jquery 使用多个 setTimeouts

Question

我目前正在创建一个包含一些动态内容的网站，以便每当用户将鼠标悬停在标签上时，标签都会展开以显示更多信息，然后在特定时间后标签将再次折叠，除非用户再次将鼠标悬停在标签上，在这种情况下超时将重置。我已经开发了代码来为 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);
    }); 

提前感谢任何帮助。

Answer 1

您可以维护一个计时器数组，例如

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);
});

Answer 2

为什么不使用hover：

$('.label').hover(function(){
  $('#' + this.id + ' div').slideDown('slow');
},
function(){
  $('#' + this.id + ' div').slideUp('slow');
})

这样，当标签

悬停在标签上时，将显示更多信息，当鼠标离开它们时，它们将再次隐藏。

要hover的第一个参数用于鼠标输入，而第二个参数用于鼠标离开。

更多信息：

http://api.jquery.com/hover/

Answer 3

您可以使用 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（） 文档